使用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容器内，然后将其嵌套在另一个span*块内以创建您正在寻找的效果。例如尝试这个：

超文本标记语言

<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>

请注意，我如何将两个侧块嵌套在另一个块.row-fluid内的容器内.span*，将它们堆叠起来。

现在，通过一些 CSS，我们可以将堆叠的.span*块拉伸到父块的宽度以创建一列：

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