带有Twitter引导程序的全宽布局

69

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

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

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

css  twitter-bootstrap 
— MB。
source
1
如果您想要全宽布局，只需将外部容器设置为100％，除非我遗漏了什么？
— 欧米茄
跨度具有固定宽度，例如570px。即使我添加100％，它们也不会覆盖整个页面。<DIV类= '行'> <DIV类= 'span12'> </ DIV> </ DIV>不会涵盖整个事情
— MB。
如果告诉它有一个固定的宽度（例如，在CSS中），则只有一个固定的宽度。将570px更改为一个百分比。如果您需要进一步的帮助，那么最好发布代码甚至是查看问题所在的链接。
— 欧米茄
我使用的是Bootstrap的响应式设计版本，如果您查看源代码github.com/twitter/bootstrap/blob/master/less/variables.less，您会看到它使用固定值。我担心使用流体，因为听说它将在3.0中删除。
— MB。
3
github.com/twitter/bootstrap/wiki/Upcoming-3.0-changes “彻底修改了默认网格系统。现在使用百分比宽度，填充和框大小：边框而不是像素宽度和边距。”
— 欧米茄

Answers:

43

由于可接受的答案与BS3不在同一个星球上，因此我将分享我正在使用的功能，以实现近乎全角的功能。

首先，这是作弊。它并不是真正的宽度-而是实际宽度-取决于查看站点的屏幕尺寸。

BS3和流体宽度站点的问题在于他们采用了这种“移动优先”方法，这要求他们定义每个屏幕怪胎宽度，直到他们认为是台式机（1200像素）（我正在使用1900像素的笔记本电脑工作）宽屏-因此，我在内容的两边最终得到了350px的像素，BS3认为这是桌面尺寸的宽度。

他们定义了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的任何值-BS都会回落到1200px宽度，然后回落到768px，依此类推-减小到手机大小。

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

更新：

Bootstrap 3.0.1及更高版本（到目前为止）-只需设置@container-large-desktop为100%

— 麦可
source
2
为什么省略variables.less？您不能只是将其添加到它的末尾吗？只是好奇
— 菲尔，
感谢您澄清这一点并提供一个简单的解决方法。我发现这在BS3中令人沮丧。
— Iain Collins
1
不幸的是，此修复程序似乎不适用于bootstrap 3.0.1
— Phil
3
BS 3.0.1及更高版本（到目前为止）-就像将@ container-large-desktop设置为100％一样简单；
— 迈克尔
3
我相信对于BS 3.2，最好的方法现在是按照@zmt的答案中所述简单地将容器类更改为容器流体。
— ProfNimrod
11

更新：

自1月份首次回答这个问题以来，Bootstrap 3已发布，因此，如果您是BS3用户，请参阅BS3文档。对于仍在BS2上的用户，原始答案仍然适用。如果您有兴趣从2切换到3，请参阅迁移指南。

原始答案：

从bootstrap 2文档：

通过将.row更改为.row-fluid，使任何行成为“ fluid”。列的类别保持完全相同，从而易于在固定网格和流体网格之间进行切换。

码

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

结合将容器的宽度设置为流体值，可以使您获得所需的布局。

— 尼克·汤姆林
source
3
在3.0中将其删除，但可以。
— MB。
1
正如Omega在评论中指出的那样，网格系统将来将使用百分比单位。除非您可以等到Bootstrap 3降下来开始开发，否则请使用2中的流体测量。3中还有很多其他变化，以至于要使2个“向前兼容”将比IMHO值得困难。我感到您很痛苦
— 尼克·汤姆林
5

只需创建另一个类并与bootstrapcontainer类一起添加即可。您也可以使用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%;
}

希望这会有所帮助，谢谢！

— 玛丹（Madan Sapkota）
source
4 
*{
   margin:0
   padding:0
}

确保您的容器的宽度：％100

— 用户1941070
source
跨度的宽度固定为570px。即使我添加100％，它们也不会覆盖整个页面。
— MB。
如果您发布代码，我们可以尝试解决此问题，否则我们将无法为您提供正确的解决方法。
— user1941070 2013年
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，因此您应该能够立即爬上边缘。（列的两边仍然有15px的填充，因此您可能必须在设计中考虑到这一点，但这并不能阻止您，并且可以在下载Bootstrap时始终对其进行自定义。）

— 卡佩里亚姆
source
2

BS3最简单的方法就是像这样重置由BS3 CSS设置的最大宽度和填充。您再次得到一个容器流体：

.container{
  max-width:100%;
  padding:0;
}
— ROMB6
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.