html - Bootstrap 导航栏显示

Question

Boostrap Navbar 宽度 取决于它的内容 和屏幕尺寸。

对于小屏幕尺寸，导航栏标题被打包在一个按钮中，对于大屏幕尺寸，如果有足够的空间，标题全部对齐。

对于中间尺寸的屏幕，结果可能会非常 NumPy ，如下图所示:

如果有足够的空间，它是否提供了一种使单个下拉按钮或所有标题对齐的方法，但可以防止导航栏内容相互重叠的配置？

这是上面例子的 fiddle :https://jsfiddle.net/bb61c412/165/

以及相应的代码。

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />

<div class="navbar navbar-default navbar-fixed-top ">
  <div class="container">
    <div class="navbar-header">

      <a href="#" class="navbar-brand">website</a>
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse" id="navbar-main">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">a long Title1</a>
        </li>
        <li class="active"><a href="#"> a long Title2</a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">a long Title3 <span class="caret"></span></a>
          <ul class="dropdown-menu" aria-labelledby="themes">
            <li><a href="#"> Item1</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#"> Item2</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#"> Item3</a>
            </li>
          </ul>
        </li>
        <li class="active"><a href="#">a long Title4</li>
            <li class="active"><a href="#">a long Title5</li>
            <li class="active"><a href="#">a long Title6</li>
            <li class="active"><a href="#">a long Title7</li>
            <li class="active"><a href="#">a long Title8</li>
            


          </ul>

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

您可以覆盖默认断点的导航栏值，以便导航栏本身隐藏并且汉堡包按钮保持可见，直到屏幕宽度变大。使用类似的东西:

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

媒体查询 max-width 的 991px 值是您可以更改的自定义断点值。

Updated fiddle