我正在尝试使用 Twitter Bootstrap(仅框)进行此布局:
基本上,它是一个 youtube 嵌入视频和右侧两个相同大小的框。
我现在有这个(haml):
.row
.span8
/ embedded code
.span4
/ I need to put two boxes here... how?
最佳答案
您可以堆叠 .span*
.row-fluid
中的 block 然后可以嵌套在另一个 span*
中的容器 block 来创建您正在寻找的效果。试试这个例如:
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="big box">
box
</div>
</div>
<div class="span3">
<div class="row-fluid">
<div class="span3">
<div class="box">
box
</div>
</div>
<div class="span3">
<div class="box">
box
</div>
</div>
</div>
</div>
</div>
</div>
注意我是如何将两个侧 block 嵌套在一个
.row-fluid
中的。另一个容器内 .span*
将它们堆叠起来。现在使用一点 CSS,我们可以拉伸(stretch)堆叠的
.span*
block 到父 block 的宽度来创建列:CSS
.row-fluid [class*="span"] .row-fluid [class*="span"] {
margin-left: 0;
width: 100%;
}
演示:http://jsfiddle.net/k27S5/show/
不太了解 HAML,但在查看文档后,设置应该如下所示:
哈姆勒
.container-fluid
.row-fluid
.span9
content
.span3
.row-fluid
.span3
content
.span3
content
关于ruby-on-rails - 使用 Twitter Bootstrap 编写此布局的提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11532196/