CSS 在 Twitter 引导程序流体布局中调整 iframe 大小的正确方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13536015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the correct way to size an iframe in a Twitter bootstrap fluid layout?
提问by gatoatigrado
I have a 2-column fluid Twitter bootstrap layout, and want an iframe in one of the panes (it will contain the Google tasks widget -- https://mail.google.com/tasks/ig). How do I set the width properly? I figured out how to set the style so it has a border (to distinguish it as external page content), but I can't make it fill one of the columns properly. This is what I currently have:
我有一个 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>
Full example (save as an HTML file): http://pastebin.com/1u2QeuZk
完整示例（另存为 HTML 文件）：http: //pastebin.com/1u2QeuZk
回答by Joe Dyndale
Use the row-fluidclass to define a row, and spanX classes to define columns. Like so:
使用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>
However:The Xs in the spanXneed to add up to 12 for each row. So in the above example you would need to wrap the content of the other column in a tag with a span6class as well, or you can use the offset6class on the iframe if it is the only content on that particular row in order to make it align to the right.
但是：spanX每行中的 X需要加起来为 12。因此，在上面的示例中，您还需要将另一列的内容包装在带有span6类的标签中，或者offset6如果它是该特定行上的唯一内容，则可以在 iframe 上使用该类以使其对齐向右。
To have one column be wider than the other you can change it up by changing the X in spanX, just make sure they add up to 12 for a row.
要让一列比另一列更宽，您可以通过更改 X 中的 X 来更改它spanX，只需确保它们在一行中加起来为 12。
In case you were wondering how to make a column a specific width: The whole point of a fluid grid is to notuse specific widths. You set the width of the container (preferably with relative units as well, in order for the content to adapt to the size of the viewport), and each column will be 1/12th the width of the container. So if you dowant to control the width exactly, then you could always make the container a specific width so that the column you want can have a width that's a multiple of 1/12th the container's width. I.e. if you want the column to be 400px wide you could make the container 800px wide and use the class span6on the column. Or use span3to make it 200px wide etc.
如果您想知道如何使列具有特定宽度：流体网格的重点是不使用特定宽度。您设置容器的宽度（最好也使用相对单位，以便内容适应视口的大小），每列将是容器宽度的 1/12。因此，如果您确实想精确控制宽度，那么您始终可以使容器具有特定的宽度，以便您想要的列的宽度可以是容器宽度的 1/12 的倍数。即，如果您希望该列的宽度为 400 像素，则可以使容器宽度为 800 像素并span6在该列上使用该类。或使用span3使其宽度为 200px 等。
I's all explained very well in the docs: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
我在文档中都解释得很好：http: //twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
