8

我有一个 2 列流畅的 Twitter 引导布局，并希望在其中一个窗格中有一个 iframe（它将包含 Google 任务小部件——https: //mail.google.com/tasks/ig）。如何正确设置宽度？我想出了如何设置样式，使其具有边框（以将其区分为外部页面内容），但我无法使其正确填充其中一列。这是我目前拥有的：

      <iframe class="container well well-small"
          style="width: 80%; height: 400px; background-color: #f5e5c5;"
          src="https://mail.google.com/tasks/ig">
      </iframe>

完整示例（另存为 HTML 文件）： http: //pastebin.com/1u2QeuZk

4

1 回答 1

14

使用row-fluid类定义行，使用 spanX 类定义列。像这样：

<div class="row-fluid">
   <iframe class="container well well-small span6"
           style="height: 400px; background-color: #f5e5c5;"
           src="https://mail.google.com/tasks/ig">
   </iframe>
</div>

但是： Xs 中的spanX每行需要加起来最多 12 个。因此，在上面的示例中，您还需要将另一列的内容包装在带有span6类的标签中，或者offset6如果它是该特定行上的唯一内容，则可以在 iframe 上使用该类以使其对齐向右。

要使一列比另一列宽，您可以通过更改 X in 来更改它spanX，只需确保它们每行加起来为 12。

如果您想知道如何使列具有特定宽度：流体网格的重点是不使用特定宽度。您设置容器的宽度（最好也使用相对单位，以使内容适应视口的大小），每列将是容器宽度的 1/12。因此，如果您确实想精确控制宽度，那么您始终可以使容器具有特定宽度，以便您想要的列的宽度可以是容器宽度的 1/12 的倍数。即，如果您希望列宽 400 像素，您可以使容器宽 800 像素并使用span6列上的类。或使用span3使其宽 200 像素等。

我在文档中都解释得很好：http: //twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

于 2012-11-23T21:48:29.583 回答