Question

我将导航栏放在容器外面，使nabar获得全宽。但奇怪的是，现在导航栏已超过宽度（超过预期），现在有一个水平滚动条。这是代码：

<div class="row">
<nav class="navbar navbar-default">
<div class="container">

    <section class="">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>

            </button>
        </div>
        <div class="collapse navbar-collapse" id="collapse">
            <ul class="nav navbar-nav">
                <li class="active "><a href=""><span class="glyphicon glyphicon-home"></span></a></li>
                <li class=" dropdown"><a href="#" data-toggle="dropdown">text menu<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="">text menu</a></li><li><a href="">text menu</a></li><li><a href="">text menu</a></li><li><a href="">text menu</a></li>
                    </ul>                    
                </li>
                <li class="" dropdown"=""><a href="#" data-toggle="dropdown">text menu <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="">text menu</a></li><li><a href="">text menu</a></li><li><a href="">text menu</a></li>
                    </ul>
                    </li>
                <li class=" "><a href="">text menu</a></li>
                <li class=" "><a href="">text menu</a></li>
                <li class="dropdown"><a href="#" title="text menu" data-toggle="dropdown">text menu <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="" title="text menu">text menu</a></li>
                        <li><a href="" title="text menu">text menu</a></li>
                    </ul></li>
            </ul> 
            <form role="form" class="navbar-form navbar-right" id="formCari" method="GET" action="search">
            <div class="form-group has-feedback">
            <input type="search" name="q" id="q" class="form-control" placeholder="text menu">
            <i class="form-control-feedback glyphicon glyphicon-search " style="position:absolute;/*top:7px;*/"></i>
            </div>
            </form>
        </div>
        </section>

</div>
</nav> 
</div>

感谢您的帮助！

Answer 1

问题在于父.row元素，这使.navbar显示奇怪。

如果您从第一个div中删除了类.row，它将正常工作。

导致问题的CSS（来自bootstrap）

.row {
    margin-right: -15px;
    margin-left: -15px;
}

Bootstrap Navbar over width错误

1 个答案: