基于Bootstrap的导航以及下拉支持,以使用全宽度显示均匀间隔的导航

时间:2017-11-26 23:05:08

标签: html css twitter-bootstrap

尝试使用bootstrap设计顶部导航布局,我发现它默认为左对齐。如何让它使用顶部的全宽?

当前     https://jsfiddle.net/v2notb5n/

    <nav class="navbar">

<div class="fluid-container">
<ul class="nav navbar-nav navbar-inverse">
<li class="nav_page active"><a href="#" class="nav_txt"> Home</a> </li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" class="nav_txt"> Team <span class="caret"></span></a></li>
<ul class="dropdown-menu">
                        <li><a href="#">National</a></li>
                        <li><a href="#">Geo</a></li>
                        <li><a href="#">Team Pictures</a></li>
                  </ul>
<li> <a href="#" class="nav_txt">About us</a> </li>
</ul>
</div>

</nav>

预期结果:     https://imgur.com/a/ZQDR0

我尝试了类似的内容Bootstrap navbar justify / span menu items occupying full width

但这对我没用。

根据建议和答案进行了更新:https://jsfiddle.net/uahwra75/1/

1 个答案:

答案 0 :(得分:0)

要让导航栏拉伸整个宽度,只需覆盖float: left上的.navbar-nav以获得中等屏幕宽度和更高的宽度,然后执行以下操作:

@media screen and (min-width: 768px) {
  .navbar-nav {
    float: none;
  }
}

我创建了一个展示 here 的工作小提琴。

另请注意,您错误地使用了课程fluid-container而不是container-fluid,这会影响您的填充。我已经在小提琴中纠正了这个,以及下面的片段:

&#13;
&#13;
@media screen and (min-width: 768px) {
  .navbar-nav {
    float: none !important; /* StackSnippets require more specificity */
  }
  .navbar-nav li {
    width: calc(100% / 3);
  }
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-inverse">
      <li class="nav_page active">
        <a href="#" class="nav_txt"> Home</a>
      </li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">National</a></li>
          <li><a href="#">Geo</a></li>
          <li><a href="#">Team Pictures</a></li>
        </ul>
      </li>
      <li><a href="#" class="nav_txt">About us</a></li>
    </ul>
  </div>
</nav>
&#13;
&#13;
&#13;

修改

为了进一步确保标题集中化,您希望将width添加到.navbar-nav li 100%除以列数。考虑到你有三列,你除以三:

.navbar-nav li {
  width: calc(100% / 3);
}

请注意,与删除float一样,这应该包含在媒体查询中。

我已经创建了一个新的小提琴,展示了这个 here

希望这有帮助! :)