logo标签列表

Twitter Bootstrap实现全宽度布局

csstwitter-bootstrap
69

我想实现类似于这个的布局：http://dribbble.com/shots/829195-Slate/attachments/86422

我的项目使用Twitter Bootstrap和响应式设计。是否可以使用Bootstrap实现全宽度布局？

问题在于，根据我所读到的，流体布局将在Bootstrap 3.0中被移除，而响应式设计具有固定的宽度。

1
如果您想要一个全宽度的布局，只需将外部容器设置为100％即可，除非我漏掉了什么？ - Omega
span元素有固定的宽度，例如570像素。即使我添加了100％，它们也无法覆盖整个页面。<div class ='row'> <div class ='span12'> </ div> </ div>无法覆盖整个内容。 - MB.
如果它被要求具有固定宽度（例如在CSS中），那么它只会有一个固定的宽度。将570px更改为百分比。如果您需要进一步帮助，最好发布代码甚至链接以查看问题所在。 - Omega
我使用了Bootstrap的响应式设计版本。如果你查看源代码https://github.com/twitter/bootstrap/blob/master/less/variables.less，你会发现它使用了固定值。我担心使用流式布局，因为听说在3.0版本中将被移除。 - MB.
3
全新设计的默认网格系统。现在使用百分比宽度、内边距和盒模型为border-box，而不是像素宽度和外边距。 - Omega
10个回答
127
7
为什么答案声称类名应为.container-liquid，我并不完全理解，实际上Bootstrap的类名是.container-fluid。检查一下你的资源：http://getbootstrap.com/css/#grid - Maciej Gurban
4
如果有人正在使用布局页（_Layout.cshtml），请在包含@RenderBody()的div中添加container-fluid。 - usefulBee
42

由于被接受的答案和 BS3 不在同一个星球上，我将分享我正在使用的东西，以实现近乎全宽度的功能。

首先，这是作弊。它并不真正具有流体宽度——但根据浏览站点的屏幕大小，它似乎是全宽度的。

BS3 和流体宽度站点的问题在于，它们采取了“移动优先”的方法，需要定义每个可怕的屏幕宽度，直到它们认为是桌面（1200px）。我正在使用一台 1900px 宽的笔记本电脑，所以在 BS3 认为是桌面大小的宽度处，我会在内容两侧各有 350px。

它们定义了 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);
    }
}

这两个设置为实现不同屏幕宽度所需做的事情树立了榜样。在这里，您可以在1600px和1900px获得全宽度。如果小于1600，则Bootstrap会回退到1200px宽度，然后到768px等，直到手机尺寸。

如果您需要支持更大的屏幕，只需创建更多的@media screen语句即可。如果您正在构建CSS，则需要确定使用了什么格栅宽度，并从目标屏幕宽度中减去它。

更新：

自Bootstrap 3.0.1版本以来 - 只需将@container-large-desktop设置为100％

2
为什么省略 variables.less 文件呢？不能将其添加到末尾吗？只是好奇。 - Phil
感谢您澄清并提供简单的解决方法。我在BS3中发现这很令人沮丧。 - Iain Collins
@Phil：我没有省略variables.less，我使用自己的版本而不是工厂版本。是的，我确实在其末尾添加了一些内容。 - Michael
1
很遗憾，这个修复方法似乎在Bootstrap 3.0.1中不再适用了。 - Phil
3
BS 3.0.1 及以上版本（目前为止）- 设置 @container-large-desktop 为100％ 就能轻松实现。 - Michael
3
我认为对于 BS 3.2，现在最好的方法是按照 @zmt 的答案所述，将您的容器类更改为 container-fluid。 - ProfNimrod
11

更新：

自从这个问题最初在一月份回答以来，Bootstrap 3已经发布了，所以如果你是BS3用户，请参考BS3文档。对于仍在使用BS2的人，原始答案仍然适用。如果你有兴趣从2切换到3，请查看迁移指南。

原始答案：

从Bootstrap 2 文档中可以得知：

通过将.row更改为.row-fluid，使任何行“流动”。列类保持完全相同，使得轻松地在固定和流动网格之间切换。

代码

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

这个，结合将容器的宽度设置为流动值，应该能够实现你想要的布局。
3
3.0版本将会把它移除，但目前还可以使用。 - MB.
1
正如Omega在评论中指出的那样，网格系统将来会使用百分比单位。除非你可以等到Bootstrap 3发布后再开始开发，否则请在2中使用流体测量值。在3中还有很多其他的变化，试图使2“向前兼容”将会更加困难，而且不值得我个人认为。但我感同身受：） - Nick Tomlin
7
截至最新版本的Bootstrap（3.1.x），实现流式布局的方法是使用.container-fluid类。
参考Bootstrap网格。
5

只需创建另一个类并与Bootstrap的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%;
}

希望这能帮到你，谢谢！
4
*{
   margin:0
   padding:0
}

请确保您的容器宽度为100％。

span元素的宽度固定为570像素。即使我添加了100％，它们也无法覆盖整个页面。 - MB.
如果您发布您的代码，我们可以尝试解决这个问题，否则我们无法给出适当的解决方案。 - user1941070
4
在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>
的边距已经是0，所以你应该能够直接到达边缘。(列仍然在两侧有15像素的填充，所以在设计时可能需要考虑这一点，但这不应该阻止你。当你下载Bootstrap时，你总是可以自定义这个。)
3
以下是关于使用 Bootstrap 3 的 100% 宽度、100% 高度布局的示例。 这里 是示例链接。
2
使用BS3最简单的方法是通过以下方式重置BS3 CSS设置的max-width和padding。您将再次获得一个container-fluid：
.container{
  max-width:100%;
  padding:0;
}
-2

我认为你可以直接使用"class=col-md-12"，它具有所需的左右填充和100%的宽度。看起来这是第二个Bootstrap中container-fluid的很好替代品。

只有col-md-12在Bootstrap-3.3中全屏宽度下会溢出。 - GobSmack
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接