在Twitter自举流体布局中确定iframe大小的正确方法是什么？ [英] What's the correct way to size an iframe in a Twitter bootstrap fluid layout?

问题描述

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

解决方案

使用 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 中的Xs   / code>需要为每行添加最多12个。因此，在上面的示例中，您还需要将 span6 类中的另一列的内容封装在标记中，或者可以使用 
 
 
 
有一个iframe的 列比其他更宽，可以通过更改 spanX 中的X来更改它，只需确保它们对于一行添加到12即可。
 
 
 
如果你想知道如何使列具有特定的宽度：流体网格的整个点是不是使用特定的宽度。您设置容器的宽度（最好还有相对单位，以使内容适应视口的大小），每列将是容器宽度的1/12。因此，如果您想要完全控制宽度，那么您可以始终使容器具有特定宽度，以便您想要的列的宽度可以是容器宽度的1/12倍。也就是说如果你想要的列是400px宽，你可以使容器800px宽，并使用类 span6 列。或者使用 span3 使其宽度为200像素。
 
 
 
我在文档中解释得很好： http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem  
 
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:
      <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
解决方案
Use the row-fluid class to define a row, and spanX classes to define columns. Like so:
<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 spanX need 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 span6 class as well, or you can use the offset6 class on the iframe if it is the only content on that particular row in order to make it align to the right.

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.

In case you were wondering how to make a column a specific width: The whole point of a fluid grid is to not use 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 do want 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 span6 on the column. Or use span3 to make it 200px wide etc.

I's all explained very well in the docs: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

                        
这篇关于在Twitter自举流体布局中确定iframe大小的正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！