Question

我有一个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

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是唯一内容，则可以使用iframe上的offset6类在该特定行上，以使其与右侧对齐。

要让一列比另一列宽，您可以通过更改spanX中的X来更改它，只需确保它们最多可以连续添加12行。

如果您想知道如何使列成为特定宽度：流体网格的整个点是不使用特定宽度。您可以设置容器的宽度（最好使用相对单位，以使内容适应视口的大小），每列将是容器宽度的1/12。因此，如果你做想要精确控制宽度，那么你总是可以使容器具有特定的宽度，这样你想要的列的宽度就是容器宽度的1/12的倍数。即如果您希望列宽为400px，则可以使容器宽度为800px，并使用列上的类span6。或者使用span3使其宽度为200px等。

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

在Twitter引导程序流体布局中调整iframe大小的正确方法是什么？

1 个答案: