css - 在 Twitter Bootstrap 流体布局中调整 iframe 大小的正确方法是什么？

Question

我有一个 2 列流畅的 Twitter Bootstrap 布局，并希望其中一个 Pane 中有一个 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

Answer 1

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

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

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

如果您想知道如何使列具有特定宽度:流体网格的全部意义在于不使用特定宽度。您设置容器的宽度(最好也使用相对单位，以便内容适应视口(viewport)的大小)，每列将是容器宽度的 1/12。因此，如果您确实想要精确控制宽度，那么您始终可以使容器具有特定的宽度，这样您想要的列的宽度可以是容器宽度的 1/12 的倍数。 IE。如果您希望该列的宽度为 400 像素，您可以将容器设置为 800 像素宽，并在该列上使用 span6 类。或者使用 span3 使其宽度为 200px 等。

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