你能用一个容器固定整个网页吗？

Question

我的问题似乎找不到答案。

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

我不确定我自己的解释是否正确。如果您有任何问题，请提问，我会尽力解释得更好。

编辑

下面杰克逊说"You can use one container div if you like but then all of your page will be contained within that space. It depends on your intention"

这是我想做的，但我不知道将容器标签放在哪里才能实现。

不好意思没说清楚。我也没有任何代码可以展示，因为考虑到我对此有多困惑，我还没有尝试制作它。

Answer 1

假设我知道你在说什么，你想要这样的东西：

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

在上面的示例中，header/navigation 将跨越页面的整个宽度，并且容器内的所有内容都将保留在容器的 space 范围内。

Answer 2

container有两个主要目的：

让你的内容固定宽度（如果你想要全宽可以使用流体容器）
房屋网格组件（.row 和 .col-...）

当您使用 .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。但一般来说，您应该只需要一个容器来容纳大部分页面，因为您可以在同一个容器中包含多行。使用新容器的主要原因可能是要在流体容器和固定宽度容器之间切换。

Answer 3

如您所述，使用 .container class 进行固定布局。有多个正确答案。您的容器可以是 body 标签中的第一个 div。或者您可以像这样在导航和其他 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>

你能用一个容器固定整个网页吗？

Can you make an entire webpage fixed with only one container?

html

css

containers

twitter-bootstrap