Question

似乎无法找到我的问题的答案。

现在我正在学习如何使用bootstrap，我读到它需要一个容器来包装站点元素。我希望整个网页处于固定位置，而不是全宽。但我不明白我是否可以在整个页面中使用一个div class =“container”，或者是否必须包含导航栏，标题等每个部分。？

我不确定我是否正确解释过自己。如果您有任何疑问，请询问，我会尝试更好地解释。

修改

杰克逊说：“如果你愿意，你可以使用一个容器div，但是你的所有页面都将包含在那个空间内。这取决于你的意图”

这就是我想做的，但我不知道在哪里放容器标签来实现这一点。

我很抱歉没有说清楚。我也没有任何代码可以显示，因为我还没有尝试过，但考虑到我对此感到困惑。

Answer 1

正如您所提到的，使用.container类进行固定布局。有多个正确的答案。您的容器可以是身体标签内的第一个div。或者你可以使用nav和其他div之类的容器。

<html>
<head>
    <!-- head stuff -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <!-- navbar stuff -->
      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <!-- jumbotron stuff -->
      </div>
    </div>

    <div class="container">
      <!-- content stuff -->
    </div>

</body>
</html>

Answer 2

假设我知道你在谈论什么，你想要这样的事情：

<div class="nav navbar-nav">This would be where your header/nav links go</div>
<div class="container">
    Everything else on your page that you want "contained" would go inside this container
</div>

在上面的示例中，标题/导航将跨越页面的整个宽度，容器内的所有内容都将保留在容器的空间内。

Answer 3

container有两个主要目的：

使您的内容固定宽度（如果您想要全宽，可以使用液体容器）
众议院网格组件（.row和.col-... s）

当您使用.row时，它会设置负左右边距以说明列之间的装订线。容器创建左右填充以抵消行上的负边距。如果没有容器，您的行将延伸到页面之外并导致水平滚动（可能不合适）。

因此，使用容器的正确方法是将网格组件包装在其中：

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          ...
        </div>
        <div class="col-md-6">
          ...
        </div>
      </div>
    </div>
  </body>
</html>

就使用多个容器而言，取决于具体情况。 Bootstrap在其他一些组件中使用容器，例如navbars。但通常，您应该只需要一个容器用于页面的大部分，因为您可以在同一个容器中拥有多个行。拥有新容器的主要原因可能是在流体容器和固定宽度容器之间切换。

你能用一个容器修复整个网页吗？

3 个答案: