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

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>

.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，但在查看文档后，设置应该如下所示：

HAML

.container-fluid
  .row-fluid
    .span9
      content
    .span3
      .row-fluid
        .span3
          content
        .span3
          content

Answer 2

如果您使用的是固定宽度布局：

.row
  .span8
  .span4
    .row
     .span4
    .row
    .span4

如果您使用流体布局：

.row-fluid
  .span8
  .span4
    .row-fluid
      .span12
    .row-fluid
      .span12

这假设您不关心匹配两列的高度，这无论如何都不会由 Bootstrap 处理。

Answer 3

像大多数基于网格的系统一样，twitter bootstrap 中使用的系统将帮助您按行而不是按列进行布局。

我假设您希望左侧的大盒子与右侧的两个盒子高度相同。如果是这种情况，最简单的方法是使用表格。是的，人们对表格的评价很差，但对于某些布局，这是最简单的解决方案。

<table>
  <tr>
    <td>big box on left</td>
    <td>
      <div>small top box on right</div>
      <div>small bottom box on right</div>
    </td>
  </tr>
</table>

然后相应地设置样式