Question

我正在使用bootstrap 3x。我有以下导航栏：

<div class="navbar" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary">
            <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="navbar-collapse collapse" id="nav-secondary">
          <ul class="nav nav-pills nav-justified">
            <li style="border: 1px solid grey"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

当我使用容器类 - <div class="container">时，我得到了很多填充，其中更大的分辨率看起来更糟，即使我使用nav-justifed，它就像菜单居中一样。此屏幕截图可以使其更加清晰

With padding

但是我想避免这种填充，让菜单像这样占据整个空间：

Whole space

第二张图片是评论<div class="container">的时间。我想我仍然得到的填充来自.navbar类，但它仍然更好。但我想知道 - 从导航栏中删除<div class="container">是否可以，因为对我来说这似乎不是一个好主意（虽然可能是错的）。我还在填充，所以我的问题是：

是否可以删除<div class="container">？
你能帮我找一个基于CSS的解决方案，我认为这会更好吗？

编辑：

更改宽度的PrintScreen： Css modified

Answer 1

.container类强制执行响应静态宽度，这会导致此行为，但它也会在两侧提供框架一致的填充并自动计算边距（margin-left: auto; margin-right: auto）。删除它不是一个好主意。

了解限制宽度（通常通过最大宽度）通常是可取的，因为没有它的导航证明在较大的屏幕上可能无法正常工作（例如27“Thunderbolt显示器）。那就是说，如果你确定你的方法，您可以通过向该容器添加.full-width类来扩展核心，然后定位.container.full-width并设置width: auto。确保在单独的样式表中完成所有这些操作，而不是修改Bootstrap的核心：

HTML

<div class="navbar" role="navigation">
  <div class="container full-width">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary">
        <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="navbar-collapse collapse" id="nav-secondary">
      <ul class="nav nav-pills nav-justified">
        <li style="border: 1px solid grey"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</div>


CSS

.container.full-width {
  width: auto;
}

因为你要覆盖核心，你可能还想添加!important以避免特异性问题，尽管下面的Codepen并不表示需要它。请记住这一点。

最后，在当前版本的Chrome和Safari中使用Bootstrap的对齐导航功能为noted as having issues，因此您可能需要在使用前三思而后行。

Here's a codepen.

Answer 2

使用“容器流体”类

外观：

<div class="navbar" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary">
        <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="navbar-collapse collapse" id="nav-secondary">
      <ul class="nav nav-pills nav-justified">
        <li style="border: 1px solid grey"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</div>

更改引导导航栏，以便链接占据整个空间

2 个答案: