Question

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

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

对于中间屏幕尺寸，结果可能非常麻醉，如下图所示：

是否有办法让单个下拉按钮或所有标题对齐，如果有足够的空间，但是为了防止将navabar内容配置在另一个上面？

以上示例中有一个小提琴：https://jsfiddle.net/bb61c412/165/

和相应的代码。

＆＃13;

<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>

＆＃13;

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;
    }
}

媒体查询991px的{{1}}值是您可以更改的自定义断点值。

Updated fiddle

Answer 2

您可以定义自己的移动菜单断点。您可以通过自定义Bootstrap版本来完成此操作。最简单的方法是转到http://getbootstrap.com/customize/#grid-system并定义@ grid-float-breakpoint（例如，800px）。因此，您可以下载更改断点的Bootstrap文件。

Answer 3

首先，您有很多未公开的a标记，从 Title4 开始。下一步，要为导航栏覆盖@media-query，Lloyd Banks已为此案例编写了非常好的解决方案。您可以将其包含在styles.css文件中，该文件链接在bootstrap.css文件下方。我用封闭标签和新断点

更新了 jsfiddle

jsfiddle

Bootstrap Navbar显示

3 个答案: