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

Posted 2023-03-11

【中文标题】在 Twitter 引导流体布局中调整 iframe 大小的正确方法是啥？

【英文标题】：What's the correct way to size an iframe in a Twitter bootstrap fluid layout?在 Twitter 引导流体布局中调整 iframe 大小的正确方法是什么？

【发布时间】：2012-11-12 05:28:04

【问题描述】：

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

【参考方案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。

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

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