ruby-on-rails - 使用 Twitter Bootstrap 编写此布局的提示

Question

我正在尝试使用 Twitter Bootstrap(仅框)进行此布局:



基本上，它是一个 youtube 嵌入视频和右侧两个相同大小的框。

我现在有这个(haml):

.row
  .span8
    / embedded code
  .span4
    / I need to put two boxes here... how?

Answer 1

您可以堆叠 .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