0

我正在使用引导程序 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它就像菜单居中一样。这个截图可以更清楚

带填充物

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

整个空间

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

  1. 可以去掉<div class="container">吗？
  2. 你能提供一个基于 CSS 的解决方案，我认为这里会更好吗？

编辑：

改变宽度的 PrintScreen： CSS修改

4

2 回答 2

0

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

了解限制宽度（通常通过最大宽度）通常是可取的，因为在没有它的情况下证明您的导航可能无法在较大的屏幕（例如 27 英寸 Thunderbolt 显示器）上正常工作。也就是说，如果您确定您的方法，您可以通过.full-width向该容器添加一个类来扩展核心，然后 target.container.full-width和 set 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 并不表示需要它。请记住它。

最后，使用 Bootstrap 的合理导航功能在当前版本的 Chrome 和 Safari中存在问题，因此您可能需要在使用之前三思而后行。

这是一个代码笔。

于 2013-11-13T15:17:48.770 回答
0

使用“容器流体”类

看：

<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>
于 2018-08-30T02:42:45.467 回答