引导100％宽/全宽

我想创建一个引导一个新的网站，我需要它是宽100％，但我不希望它是液体。至少现在不行。引导100％宽/全宽

我遇到的问题是：使用bootstrap标准将您限制为960像素，并且流体布局为全宽度，但行为类似于流体布局，应当通过移动元素在窗口缩小时变为堆叠状态。

有没有办法使静态引导布局具有100％的宽度？

来源

2013-03-04 Somk

只是改变.container到你需要的大小？ – Dreamwalker 2013-03-04 15:26:30

100％始终是一个相对值。您应该以像素为单位更改容器宽度。 – JimmyRare 2013-03-04 15:36:36

100％的宽度...静态

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

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

来源

2013-03-04 15:43:44

谢谢你的帮助。是的，你说得没错这是一个矛盾，所以我想我真的是问我怎么能有一个流体布局不叠加的跨度。 – Somk 2013-03-04 15:45:00

您能否详细说明“堆栈跨度”？ Bootstrap有12种不同的'span *'大小。 '.span1'可以在'.container'的一行内适合12次，而'span12'只适合一次。只要你的'span *'元素不超过它们容器的跨度宽度，你就不应该把它们堆叠起来。 – 2013-03-04 15:48:08

一个例子引导布局可以是：'容器（行（span12（行（span6（行（span3，span3）），span6（行（跨距2，span4）））））'注意'row'类被使用。确定元素的新行，如果没有它，利润将超过容器的限制 – 2013-03-04 15:50:13

我想你的意思是你不想边缘/填充两侧。（这是您的信息的唯一途径 - 百分之百的宽度将占用整个屏幕的大小，因此它绝不会是静态的 - 尺寸将根据窗户的大小而变化）

我们没有一个用例或者JSFiddle，所以我不能给你确切的代码，但是你需要确保你的body有margin：0和padding：0，然后用Firebug或Chrome Web Dev工具查找其他div。

如果你希望你的布局是流体，但在某一点停止生长，那么你就需要应用最大宽度：1000像素（例如），你的身体或你的一般容器/包装元素。

来源

2013-03-04 16:15:25

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

如果您不想要.container排水沟/保证金，您可以将您的内容放在容器外，但请记住，您必须自行维护您的内容布局（仍然可以使用网格，但失去了将内容居中的能力）和不要忘记大部分Bootstrap组件，如.navbar需要.container来控制其宽度。

我的一个工作，需要一个完整的屏幕旋转木马持有的所有内容，所以我总结我的内容与.container居中内容。

enter image description here

来源

2013-03-05 03:49:25 lngs

是完全固定我的问题.row> .container>。内容 – Jake 2013-07-06 06:33:05

这是很容易在引导3来实现的，只是你自己更换.container格：

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

感谢埃里克花为单挑： http://www.helloerik.com/bootstrap-3-grid-introduction#fluid

UPDATE

Bootstrap 3现在提供内置流体容器类，只需使用<div class="container-fluid">即可。See docs.

来源

2013-09-13 10:16:45

我不能完全弄清楚如何回答的主要问题，但在这里就是你想要的OP

正如上面所说的，不使用.container，用你自己的类，如：

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

然后，当你建立你的网格，只需使用COL-XS-*为列。您现在将有一个100％宽度的网站，不会在“移动”视图中进行堆叠。欢迎到了90年代;）

来源

2013-10-09 19:36:04 helloerik

这是自举3 - 。原来的问题和答案似乎成为引导2.3 – helloerik 2013-10-09 19:37:12

另外，你欺骗已经给你信用的答案！哈哈 – 2013-10-09 19:53:34

引导100％宽/全宽

回答

相关问题