Bootstrap 100％宽度/全宽

Question

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

我遇到的问题是：使用bootstrap标准限制你到960px并且流体布局它是全宽的，但是当窗口缩小时，应该通过移动元素变为堆叠来表现得像流体布局。

有没有办法在静态引导程序布局中使用100％宽度？

Answer 1

这很容易在Bootstrap 3中实现，只需用你自己的.container div替换：

.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">。 See docs.

Answer 2

  

100％宽度...静态

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

Bootstrap使用.container类来设置预定义的宽度。如果您希望它大于默认页面宽度，请将其增加到所需的页面宽度。但请注意，Bootstrap span*和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所以我不能给你确切的代码，但你需要确保你的身体有边距：0和填充：0然后用Firebug寻找其他div或Chrome Web开发工具。

如果您希望布局流畅但在特定点停止生长，则需要将max-width：1000px（例如）应用于您的身体或一般容器/包装元素。