CSS 带有 twitter bootstrap 的全宽布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14263307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full width layout with twitter bootstrap
提问by MB.
I'm trying to accomplish a layout similar to this one: http://dribbble.com/shots/829195-Slate/attachments/86422
我正在尝试完成与此类似的布局：http: //dribbble.com/shots/829195-Slate/attachments/86422
My project uses Twitter Bootstrap with responsive design. It is possible to implement a full width layout with Bootstrap?
我的项目使用具有响应式设计的 Twitter Bootstrap。可以使用 Bootstrap 实现全宽布局吗？
The issue is that from what I've been reading fluid layouts will be removed in bootstrap 3.0, and the responsive design has fixed widths.
问题是，根据我一直在阅读的内容，引导程序 3.0 中将删除流体布局，并且响应式设计具有固定宽度。
采纳答案by Michael
Because the accepted answer isn't on the same planet as BS3, I'll share what I'm using to achieve nearly full-width capabilities.
因为公认的答案与 BS3 不在同一个星球上，所以我将分享我用来实现几乎全宽功能的方法。
First off, this is cheating. It's not really fluid width - but it appears to be - depending on the size of the screen viewing the site.
首先，这是作弊。它不是真正的流体宽度 - 但它似乎是 - 取决于查看站点的屏幕大小。
The problem with BS3 and fluid width sites is that they have taken this "mobile first" approach, which requires that they define every freaking screen width up to what they consider to be desktop (1200px) I'm working on a laptop with a 1900px wide screen - so I end up with 350px on either side of the content at what BS3 thinks is a desktop sized width.
BS3 和流体宽度网站的问题在于他们采用了这种“移动优先”的方法，这要求他们将每个奇怪的屏幕宽度定义为他们认为是桌面（1200 像素）的宽度。我正在使用 1900 像素的笔记本电脑宽屏 - 所以我最终在内容的两侧都有 350 像素，BS3 认为这是桌面大小的宽度。
They have defined 10 screen widths (really only 5, but anyway). I don't really feel comfortable changing those, because they are common widths. So, I chose to define some extra widths for BS to choose from when deciding the width of the container class.
他们定义了 10 个屏幕宽度（实际上只有 5 个，但无论如何）。我对改变这些感到不舒服，因为它们是常见的宽度。所以，在决定容器类的宽度时，我选择定义一些额外的宽度供 BS 选择。
The way I use BS is to take all of the Bootstrap provided LESS files, omit the variables.less file to provide my own, and add one of my own to the end to override the things I want to change. Within my less file, I add the following to achieve 2 common screen width settings:
我使用 BS 的方式是获取所有 Bootstrap 提供的 LESS 文件，省略 variables.less 文件以提供我自己的文件，并在最后添加我自己的文件以覆盖我想要更改的内容。在我的 less 文件中，我添加了以下内容以实现 2 个常见的屏幕宽度设置：
@media screen and (min-width: 1600px) {
.container {
max-width: (1600px - @grid-gutter-width);
}
}
@media screen and (min-width: 1900px) {
.container {
max-width: (1900px - @grid-gutter-width);
}
}
These two settings set the example for what you need to do to achieve different screen widths. Here, you get full width at 1600px, and 1900px. Any less than 1600 - BS falls back to the 1200px width, then to 768px and so forth - down to phone size.
这两个设置为您需要做什么来实现不同的屏幕宽度设置示例。在这里，您将获得 1600 像素和 1900 像素的全宽。任何小于 1600 - BS 回落到 1200px 宽度，然后到 768px 等等 - 直到手机尺寸。
If you have larger to support, just create more @media screen statements like these. If you're building the CSS instead, you'll want to determine what gutter width was used and subtract it from your target screen width.
如果您有更大的支持，只需创建更多这样的@media screen 语句。如果您正在构建 CSS，您需要确定使用的装订线宽度并从目标屏幕宽度中减去它。
Update:
更新：
Bootstrap 3.0.1and up (so far) - it's as easy as setting @container-large-desktopto 100%
Bootstrap 3.0.1及更高版本（到目前为止） - 就像设置@container-large-desktop为一样简单100%
回答by zmt
You'll find a great tutorial here: bootstrap-3-grid-introductionand answer for your question is <div class="container-fluid"> ... </div>
你会在这里找到一个很棒的教程：bootstrap-3-grid-introduction和你的问题的答案是<div class="container-fluid"> ... </div>
回答by Nick Tomlin
Update:
更新：
Bootstrap 3 has been released since this question was originally answered in January, so if you are a BS3 user, please refer to the BS3 documentation. For those still on BS2, the original answer still applies. If you are interested in switching from 2 to 3, see the migrationguide.
Bootstrap 3 已经发布，因为这个问题最初是在一月份回答的，所以如果你是 BS3 用户，请参考 BS3文档。对于那些仍在 BS2 上的人，原始答案仍然适用。如果您有兴趣从 2 切换到 3，请参阅迁移指南。
Original answer:
原答案：
From the bootstrap 2 docs:
来自引导程序 2文档：
Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.
通过将 .row 更改为 .row-fluid 来使任何行“流动”。列类保持完全相同，可以轻松地在固定网格和流体网格之间切换。
Code
代码
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
This, in conjunction with setting the width of your container to a fluid value, should allow you to get your desired layout.
这与将容器的宽度设置为流体值相结合，应该可以让您获得所需的布局。
回答by Maciej Gurban
As of the latest Bootstrap (3.1.x), the way to achieve a fluid layout it to use .container-fluidclass.
截至最新的 Bootstrap (3.1.x)，实现流畅布局的方式是使用.container-fluid类。
See Bootstrap gridfor reference
请参阅Bootstrap 网格以供参考
回答by Madan Sapkota
Just create another class and add along with the bootstrap containerclass. You can also use container-fluidthough.
只需创建另一个类并与引导container类一起添加。你也可以使用container-fluid。
<div class="container full-width">
<div class="row">
....
</div>
</div>
The CSS part is pretty simple
CSS 部分非常简单
* {
margin: 0;
padding: 0;
}
.full-width {
width: 100%;
min-width: 100%;
max-width: 100%;
}
Hope this helps, Thanks!
希望这有帮助，谢谢！
回答by carpeliam
In Bootstrap 3, columns are specified using percentages. (In Bootstrap 2, this was only the case if a column/span was within a .row-fluidelement, but that's no longer necessary and that class no longer exists.) If you use a .container, then @Michael is absolutely right that you'll be stuck with a fixed-width layout. However, you should be in good shape if you just avoid using a .container element.
在 Bootstrap 3 中，列是使用百分比指定的。（在 Bootstrap 2 中，只有当列/跨度位于.row-fluid元素内时才会出现这种情况，但不再需要并且该类不再存在。）如果您使用 a .container，那么@Michael 是绝对正确的，您将被卡住具有固定宽度的布局。但是，如果您只是避免使用 .container 元素，那么您应该处于良好状态。
<body>
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-8">...</div>
</div>
</body>
The margin for the body is already 0, so you should be able to get up right to the edge. (Columns still have a 15px padding on both sides, so you may have to account for that in your design, but this shouldn't stop you, and you can always customize this when you download Bootstrap.)
身体的边距已经是 0，所以你应该能够直接到达边缘。（列的两边仍然有一个 15px 的填充，所以你可能需要在你的设计中考虑到这一点，但这不应该阻止你，当你下载 Bootstrap 时，你总是可以自定义它。）
回答by user1941070
*{
margin:0
padding:0
}
make sure your container's width:%100
确保您的容器的宽度：%100
回答by officert
Here is an example of a 100% width, 100% height layout with Bootstrap 3.
这是使用 Bootstrap 3 的 100% 宽度、100% 高度布局的示例。
回答by RomB6
The easiest way with BS3 is to reset the max-width and padding set by BS3 CSS simply like this. You get again a container-fluid :
BS3 最简单的方法是像这样重置 BS3 CSS 设置的最大宽度和填充。你再次得到一个容器流体：
.container{
max-width:100%;
padding:0;
}
回答by Nikita Prikazchikov
I think you could just use class "col-md-12" it has required left and right paddings and 100% width. Looks like this is a good replacement for container-fluid from 2nd bootstrap.
我认为您可以使用“col-md-12”类，它需要左右填充和 100% 宽度。看起来这是 2nd bootstrap 中容器流体的一个很好的替代品。
