Twitter的引导CSS静态流体形式定位

Question

我使用Twitter的引导框架，试图让这样的布局：

这是现在的样子：

Current layout http://f.cl.ly/items/1n3y0F1I3D282g2U1J3Z/Screen%20Shot%202012-07-28%20at%209.09.10%20PM.png

jsFiddle fullscreen

jsFiddle

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

我已经尝试了基于static-width-sidebar/fluid-content CSS布局的不同事情，尝试使文本输入宽度填充。

我想我唯一的选择是制作我自己的CSS媒体查询，它定义了文本输入的绝对宽度。

Answer 1

与许多CSS框架一样，您必须非常小心padding。取下它

.patch-well { 
    padding: 20px; 
} 

Answer 2

bootstrap还允许您通过不需要制作整个布局流体来模拟对象的最小宽度。在你的情况下，你可以尝试使包装跨度和行的导航不流畅。

Answer 3

您将整个表单放入span3中，大约是行宽的25％。因此，如果分辨率很大，span3不足以包含整个表单。在较小的分辨率下，span3的宽度变为100％，小分辨率看起来不错。只需使用其他跨班班级，并小心翼翼地计算跨班班级的数字。 Like here此外，我更喜欢使用行流体类而不是行类，它更容易使用宽度进行操作。

始终使用结构这样

<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> 

注意，总是，如果我想没有浮在设计新的生产线，如果我想宽度OD父元素的100％，我会用排液。因为子元素可以再次跨越元素的总和。在这个例子中，“content1”将在大分辨率中使用宽度的25％，但是在小分辨率下它将具有100％的宽度。在大分辨率下，“content2”和“content3”将拥有父宽度的100％，但这是容器宽度的75％。在小分辨率下，所有跨度类将具有100％的宽度。如果你不希望在某些情况下，只是用你的类覆盖默认引导CSS。

我希望你明白我的观点。对不起，我的英文:)

Answer 4

这就是你想要的http://jsfiddle.net/YxKfc/14/，请检查一下。