33

如何在引导程序 3 中制作流体容器？

在 bootstrap 2.3.2.container-fluid类中。但是现在在 bootstrap 3 中它丢失了，只有.container类。请帮我。

4

5 回答 5

33

Bootstrap 3.0转向“移动优先”的方法。.container实际上仅在您需要/想要四四方方的布局的情况下才存在。但是，如果您div.container-fluid完全豁免，则默认情况下会留下流畅的布局。

例如，要具有两列流体布局，只需使用：

<body>
  <header>...</header>
  <div style="padding:0 15px;"><!-- offset row negative padding -->
    <div class="row">
      <div class="col-md-6">50%</div>
      <div class="col-md-6">50%</div>
    </div>
  </div>
  <footer>...</footer>
</body>
于 2013-11-05T13:29:18.733 回答
21

2.x在 Bootstrap 3.x ( http://getbootstrap.com/getting-started/#migration.container-fluid ) 中被替换，所以它是流畅的，但不是全宽的。.container.container

您可以将其row用作流体容器，但您必须对其稍作调整以避免出现水平滚动条。文档摘录（http://getbootstrap.com/css/#grid）..

“希望创建完全流畅的布局（意味着您的网站会拉伸视口的整个宽度）的人们必须将他们的网格内容包含在一个包含元素中，填充：0 15px；偏移边距：0 -15px；用于 .rows。”

更多关于 3.x 的变化：http: //bootply.com/bootstrap-3-migration-guide

演示：http ://bootply.com/91948

Bootstrap 3.1 的更新

container-fluid在 Bootstrap 3.1 中再次返回。现在container-fluid可用于创建全宽布局： http: //www.bootply.com/116382

于 2013-11-05T14:45:48.283 回答
13

这是在 v3.1.0 中引入的：http: //getbootstrap.com/css/#grid-example-fluid

提交#62736046添加了“全宽容器和布局的 .container-fluid 变体”。

于 2014-02-13T09:25:19.420 回答
4

我只是设置了以下 CSS 规则，其中任何作为 container-fluid 子级的行将不再具有偏移网格系统的负边距。

.container-fluid > .row {
    margin-left: 0;
}

我将进一步测试，看看这是否会对其他固定宽度的网格布局造成任何问题。

于 2014-03-20T17:47:28.440 回答
1

这里有很好的答案，所以我会尽量避免重复我在这个主题上的以下几点：

  1. .container-fluid 已在 3.0 中删除，但现在又回到 3.4 中（此信息已回复，但我想将其放在答案中）
  2. 要获取最新版本，请转到此处或使用 Nuget。
  3. 行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。
  4. 有关 Container 的最新信息，请转到此处获取 Bootstrap CSS
于 2015-04-25T16:23:14.103 回答