带有 twitter 引导程序的全宽布局答案

【问题标题】：Full width layout with twitter bootstrap带有 twitter 引导程序的全宽布局
【发布时间】：2012-12-25 03:47:54
【问题描述】：

我正在尝试完成与此类似的布局： http://dribbble.com/shots/829195-Slate/attachments/86422

我的项目使用带有响应式设计的 Twitter Bootstrap。用 Bootstrap 可以实现全宽布局吗？

问题是，我一直在阅读的流体布局将在 bootstrap 3.0 中删除，并且响应式设计具有固定宽度。

【问题讨论】：

如果你想要一个全宽布局，只需将你的外部容器设置为 100%，除非我遗漏了什么？
span 的宽度是固定的，例如 570px。即使我添加 100%，它们也不会覆盖整个页面。
不会涵盖全部内容
如果被告知有一个固定宽度（例如在 CSS 中），它只有一个固定宽度。将 570px 更改为百分比。如果您需要进一步的帮助，那么最好发布代码甚至链接以查看问题所在。
我使用的是响应式设计版本的引导程序。如果你查看源代码github.com/twitter/bootstrap/blob/master/less/variables.less，你会发现它使用的是固定值。我很担心使用流体，因为我听说它会在 3.0 中被移除。
github.com/twitter/bootstrap/wiki/Upcoming-3.0-changes "大修默认网格系统。现在使用百分比宽度、填充和框大小：边框框而不是像素宽度和边距。"

标签： css twitter-bootstrap

【解决方案1】：

你会在这里找到一个很棒的教程：bootstrap-3-grid-introduction，你的问题的答案是<div class="container-fluid"> ... </div>

【讨论】：

我不完全明白为什么答案声称类名是.container-liquid，而真正的Bootstrap 类实际上是.container-fluid。检查哟来源：getbootstrap.com/css/#grid
如果有人在使用 Layout 页面 (_Layout.cshtml)，请将 container-fluid 添加到包含 @RenderBody() 的 div 中

【解决方案2】：

因为公认的答案与 BS3 不在同一个星球上，所以我将分享我正在使用什么来实现几乎全宽度的功能。

首先，这是作弊。这不是真正的流动宽度 - 但它似乎是 - 取决于查看网站的屏幕大小。

BS3 和流体宽度网站的问题在于，他们采用了这种“移动优先”的方法，这要求他们将每个屏幕宽度都定义为他们认为的桌面（1200 像素）我正在使用笔记本电脑具有 1900 像素宽的屏幕 - 所以我最终在 BS3 认为是桌面大小的宽度上的内容两侧都有 350 像素。

他们定义了 10 个屏幕宽度（实际上只有 5 个，但无论如何）。我真的不喜欢改变这些，因为它们是常见的宽度。所以，在决定容器类的宽度时，我选择定义一些额外的宽度供BS选择。

我使用 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);
    }
}

这两个设置为实现不同屏幕宽度所需的操作提供了示例。在这里，您将获得 1600 像素和 1900 像素的全宽。任何小于 1600 - BS 回落到 1200px 宽度，然后到 768px 等等 - 直到手机大小。

如果您有更大的支持，只需创建更多类似这样的@media screen 语句。如果您正在构建 CSS，则需要确定使用的装订线宽度并将其从目标屏幕宽度中减去。

更新：

Bootstrap 3.0.1 及更高版本（到目前为止） - 就像将 @container-large-desktop 设置为 100% 一样简单

【讨论】：

为什么省略 variables.less？你不能把它加到它的末尾吗？只是好奇
感谢您澄清这一点并提供简单的解决方法。我发现这在 BS3 中令人沮丧。
不幸的是，这个修复似乎不再适用于 bootstrap 3.0.1
BS 3.0.1 及更高版本（到目前为止） - 就像将 @container-large-desktop 设置为 100% 一样简单；
我相信对于 BS 3.2，现在最好的方法是简单地将您的容器类更改为 container-fluid，如@zmt 的回答中所述。

【解决方案3】：

更新：

Bootstrap 3 已经发布，因为这个问题最初是在一月份回答的，所以如果你是 BS3 用户，请参考 BS3 documentation。对于那些仍在使用 BS2 的人，原始答案仍然适用。如果您有兴趣从 2 切换到 3，请参阅 migration 指南。

原答案：

来自引导程序 2 docs：

通过将 .row 更改为 .row-fluid 使任何行“流畅”。专栏类保持完全相同，可以很容易地在固定和流体网格。

代码

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

这与将容器的宽度设置为可变值相结合，应该可以让您获得所需的布局。

【讨论】：

在 3.0 中会被移除，但是没问题。
正如 Omega 在 cmets 中所指出的，未来网格系统将使用百分比单位。除非您可以等到 Bootstrap 3 下降开始开发，否则请使用 2 中的流体测量。3 中还有很多其他变化，试图使 2“向前兼容”将比恕我直言更困难。但是我感觉到你的痛苦:)

【解决方案4】：

从最新的 Bootstrap (3.1.x) 开始，实现流畅布局的方法是使用 .container-fluid 类。

参考Bootstrap grid

【讨论】：

【解决方案5】：

只需创建另一个类并与引导程序container 一起添加。不过你也可以使用container-fluid。

<div class="container full-width">
    <div class="row">
        ....
    </div>
</div>

CSS 部分非常简单

* {
    margin: 0;
    padding: 0;
}
.full-width {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

希望对您有所帮助，谢谢！

【讨论】：

【解决方案6】：

*{
   margin:0
   padding:0
}

确保容器的宽度：%100

【讨论】：

span 的宽度固定为 570 像素。即使我添加 100%，它们也不会覆盖整个页面。
如果您发布您的代码，我们可以尝试解决此问题，否则我们无法为您提供正确的解决方法。

【解决方案7】：

在 Bootstrap 3 中，列是使用百分比指定的。（在 Bootstrap 2 中，仅当列/跨度位于 .row-fluid 元素内时才会出现这种情况，但这不再是必需的，并且该类不再存在。）如果您使用 .container，那么 @Michael 绝对正确你会被固定宽度的布局卡住。但是，如果您只是避免使用 .container 元素，则应该保持良好状态。

<body>
  <div class="row">
    <div class="col-lg-4">...</div>
    <div class="col-lg-8">...</div>
  </div>
</body>

body 的边距已经为 0，所以你应该可以爬到边缘。（列的两边仍然有 15px 的内边距，因此您可能需要在设计中考虑这一点，但这不应该阻止您，您可以在下载 Bootstrap 时随时自定义它。）

【讨论】：

【解决方案8】：

这是一个使用 Bootstrap 3 的 100% 宽度、100% 高度布局的示例。

http://bootply.com/tofficer/77686

【讨论】：

【解决方案9】：

使用 BS3 最简单的方法是像这样重置 BS3 CSS 设置的最大宽度和填充。你又得到了一个容器流体：

.container{
  max-width:100%;
  padding:0;
}

【讨论】：

【解决方案10】：

我认为您可以只使用“col-md-12”类，它需要左右填充和 100% 宽度。看起来这是 2nd bootstrap 中 container-fluid 的一个很好的替代品。

【讨论】：

Bootstrap-3.3 上只有 col-md-12 溢出全屏宽度。