html - Bootstrap 100% 宽度/全宽

Question

我想用 Bootstrap 创建一个新网站，我需要它的宽度为 100%，但我不希望它是流动的。至少现在不会。

我遇到的问题是：使用引导标准将您限制为 960 像素，并且使用流体布局，它是全宽的，但是当窗口尺寸缩小时，它的行为就像流体布局应该通过移动元素来堆叠。

有没有办法通过静态引导布局获得 100% 的宽度？

Answer 1

这在 Bootstrap 3 中很容易实现，只需将.containerdiv 替换为您自己的：

.my-fluid-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

感谢 Erik Flowers 的提醒： http ://www.helloerik.com/bootstrap-3-grid-introduction#fluid

更新

Bootstrap 3 现在提供了一个内置的流体容器类，只需使用<div class="container-fluid">. 请参阅文档。

Answer 2

100% 宽度 ... 静态

这有点矛盾。100% 宽度的布局不是静态的。

Bootstrap 使用一个.container类来设置预定义的宽度。如果您希望它大于默认值，请将其增加到所需的页面宽度。请注意，Bootstrapspan*和offset*类的大小需要相应地调整它们的宽度。

Answer 3

只是不包括bootstrap-responsive.css以禁用响应功能。

如果您不想要一个.container装订线/边距，您可以将您的内容放在容器之外，但请记住，您必须自己维护您的内容布局（仍然可以使用网格，但失去了将内容居中的能力）并且不要忘记大多数Bootstrap 组件就像.navbar需要.container控制它的宽度一样。

我的一项工作需要一个全屏轮播来保存所有内容，因此我将我的内容包装起来.container以使内容居中。

Answer 4

我不太清楚如何回答主要问题，但这就是你想要的 OP

如上所述，不要使用 .container，使用您自己的类，例如：

.my-fluid-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

然后，当您构建网格时，只需将 col-xs-* 用于列。您现在将拥有一个 100% 宽度的网站，该网站不会在“移动”视图中堆叠。欢迎来到 90 年代 ;)

Answer 5

我猜你的意思是你不想要边距/边距。（这是您的信息有意义的唯一方式 - 100% 的宽度将占据屏幕的整个大小，因此它永远不会是静态的 - 大小会根据窗口的大小而变化）

我们没有你的用例或 JSFiddle，所以我不能给你确切的代码，但你需要确保你的 body 有 margin:0 和 padding:0 然后用 Firebug 或 Chrome Web 寻找其他 div开发工具。

如果您希望您的布局是流畅的但在某个点停止增长，那么您需要将 max-width:1000px （例如）应用于您的身体或您的一般容器/包装器元素。