文章/答案/技术大牛

发布

社区首页 >问答首页 >折叠时引导导航条不正确

问折叠时引导导航条不正确
EN

Stack Overflow用户

提问于 2016-11-20 17:53:59

回答 1查看 196关注 0票数 0

所以我改变了css，使导航条的高度与徽标的高度相匹配。它工作得很好，但是当我将它折叠到移动视图时，有一条线在困扰着我，看看这张图片：

这是正常的destop版本：

这是折叠移动视图：

当我按下汉堡菜单时，这是折叠的移动视图。--这就是问题所在，灰色线不在：

这是我的html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Mobtech </title>

        <!--Ubaci bootstrap css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">

    </head>
    <body>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
                        <span class="sr-only"> Pokazi i sakrij navigaciju </span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="Slike/logo.png" alt="LogoSlika"/>
                    </a>
                </div> 
                <div class="collapse navbar-collapse" id="navbar-container">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#"> Početna strana </a> </li>
                        <li><a href="#"> Privatni korisnici </a> </li>
                        <li><a href="#"> Poslovni korisnici </a> </li>
                        <li><a href="#"> Uređaji </a> </li>
                        <li><a href="#"> O Nama </a> </li>
                    </ul>
                </div>
            </div>
        </nav>

        <br />
            <div class="container"> <!--Container -->

                <div class="row">
                    <!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
                    <div class="col-lg-12 bg-success"> 
                        <p> Outer div </p>
                        <div class="col-lg-6 bg-primary">
                            <p> Inner div </p>
                        </div>
                    </div>
                </div>
            </div>




            <!-- JavaScript fajl -->
            <script src="js/jquery.min.js"></script>
            <!-- Kompresovan JavaScript fajl -->
            <script src="js/bootstrap.min.js"></script>


            <!-- bg-warning = Pozadina zuta -->
    </body>
</html>

这是我的css：

    .navbar-default .navbar-nav>li>a  {
    padding: 21px 15px 21px 15px;
}
.navbar-default .navbar-brand {
    padding-top: 0px;
}

@media (max-width: 767px) {
    .navbar-nav > li > a {
    line-height: 21px;
    padding-top: 10px;
    padding-bottom: 10px;}
}

@media (max-width: 767px) {
    .navbar-default {
    line-height: 21px;
    padding-top: 0px;
    padding-bottom: 11px;}
}

nav

html

css

twitter-bootstrap

navbar

回答 1

Stack Overflow用户

发布于 2016-11-20 18:16:21

这就是解决办法：

打开bootstrap.min.css文件
搜索此代码：容器-流体>..navbar折叠，.容器-流体>..navbar头，.容器>..navbar折叠，.容器>..navbar头{边距-右：-15；边距-左：-15}
将height:150px添加到上述代码的末尾。在添加代码之后，它可能会如下所示：容器-流体>..navbar塌陷，.容器-流体>..navbar头，.容器>..navbar塌陷，.容器>..navbar标题{页边-右：-15；边距-左：-15；高度:150}；
然后再保存并检查一遍。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40707363

复制

相似问题

问折叠时引导导航条不正确
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问折叠时引导导航条不正确EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问折叠时引导导航条不正确
EN