Bootstrap导航菜单转到新行

时间:2016-03-12 17:02:02

标签: css twitter-bootstrap twitter-bootstrap-3 navbar

我正在一个网站上工作,这个网站有一个相当大的徽标和大菜单。

问题是当页面宽度减小时,引导菜单项(带有<a>标签和菜单项)会转到新行,即使它有空的空间也可以占用。

有人可以解释为什么会这样吗?

注意:

  1. 在视口宽度996px处,徽标和菜单在同一行并且右侧有足够的空间
  2. 在视口宽度986px处,菜单现在转到第二行,即使(我认为)它应该占据了右边的空间
  3. 示例js-fiddle:

    https://jsfiddle.net/ahmed_anas/oq09gksL/

    &#13;
    &#13;
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    
    <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse" style="
        /* float: right; */
        /* width: 0px; */
    ">
              <ul class="nav navbar-nav">
                
      <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
      <li class="active"><a href="#">Home</a></li><li class="active"><a href="#">Home</a></li>
                
                <li><a href="#about">About</a></li><li><a href="#about">About</a></li>
                
                <li><a href="#contact">Contact</a></li><li><a href="#contact">Contact</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:1)

我认为这是因为容器div上的媒体查询强制它在视口宽度小于992px时具有750px的宽度。在chrome检查器中,您可以看到媒体查询,如下所示:

@media (min-width: 992px)
.container {
    width: 970px;
}
@media (min-width: 768px)
.container {
    width: 750px;
}