Twitter Bootstrap CSS静态流体形式定位 [英] Twitter Bootstrap CSS static-fluid form positioning

问题描述

我使用Twitter Bootstrap框架尝试获取如下布局：

这是现在的样子：

img src =http://f.cl.ly/items/1n3y0F1I3D282g2U1J3Z/Screen%20Shot%202012-07-28%20at%209.09.10%20PM.pngalt =当前布局>

jsFiddle全屏

jsFiddle

表单容器的宽度根据浏览器的宽度而改变（Twitter Bootstrap的CSS媒体查询）。图标框总是有14px的宽度。

我尝试了基于静态宽度边栏/流体内容CSS布局的不同的东西，试图使文本输入宽度填写。

我认为我唯一的选择是使用自己的CSS媒体查询来定义文本输入的绝对宽度。

解决方案

将整个表单放到span3中，大约是行宽的25％。因此，如果分辨率较大，则span3不足以包含整数形式。在较小的分辨率，span3的宽度变为100％，并在小分辨率看起来不错。只需使用一些其他span类，并仔细计算span类中的数字。 像这里另外，我更喜欢使用行流体类，而不是行类，它更容易

 < ; div class =row-fluid> 
< div classspan3> 
<！ -  content1  - > 
< / div> 
< div classspan9> 
< div class =row-fluid> 
< div class =span6> 
<！ -  content2  - > 
< / div 
< div class =span6> 
<！ -  content3  - > 
< / div 
< / div> 
< / div> 
< / div> 
 

请注意，如果我想在设计中没有浮动，并且如果我想要100％的宽度od父元素，我会使用row-fluid。因为子元素可以再次跨越元素的总和12.在这个例子中，content1将使用大分辨率的25％的宽度，但在小分辨率下，它将具有100％的宽度。在大分辨率中，content2和content3将具有100％的父级宽度，但是是容器宽度的75％。在小分辨率下，所有span类将具有100％的宽度。如果你不想在某些情况下，只需覆盖默认的引导css与你的类。

我希望你明白我的观点。对我的英语对不起：）

I'm using the Twitter Bootstrap framework trying to get a layout like this:

This is how it looks now:

jsFiddle fullscreen

jsFiddle

The width of the form container changes based on the width of the browser (Twitter Bootstrap's CSS media-queries). The icon-boxes always have 14px of width.

I've tried different things based on static-width-sidebar/fluid-content CSS layouts to try to make the text input width fill out.

I think my only option is making my own CSS media-queries that define an absolute width for the text input.

解决方案

You put whole form into span3, it's about 25% of row width. Therefore, if resolution is big, span3 is not enough to contain whole form. On smaller resolutions, width of span3 becomes 100%, and on small resolutions looking good. Just use some other span class, and carefuly carefully calculate numbers in span classes. Like here Also, i prefer to use row-fluid class instead of row class, it's easier to manipulate with width.

Always use structure like this

<div class="row-fluid">
  <div class"span3">
     <!-- content1 -->
  </div>
  <div class"span9">
     <div class="row-fluid">
        <div class="span6">
           <!-- content2 -->
        </div
        <div class="span6">
           <!-- content3 -->
        </div
     </div>
  </div>
</div>

Note that always if i want new line in design without floating, and if i want 100% of width od parent element, i will use row-fluid. Because children elements can be again span elements the sum of the 12. In this example, "content1" will use 25% of width in big resolutions but in small resolutions it will have 100% width. In big resolutions, "content2" and "content3" will have 100% of parents width, but that is 75% of container width. In small resolutions, all span classes will have 100% width. If you don't want that in some cases, just override default bootstrap css with yours classes.

I hope you are understand what is my point. Sorry for my english :)

这篇关于Twitter Bootstrap CSS静态流体形式定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！