Bootstrap固定大小列

Question

我需要在bootstrap中执行固定宽度的右列列,但左列将是响应式的.

我使用bootstrap 2.3.2

http://pix.toile-libre.org/upload/original/1375170941.png

右栏不会在所有屏幕尺寸上调整大小.

Answer 1

我的基本解决方案如下(请参阅此处的操作).我已经填充了CSS来演示带颜色的块,但你真正需要做的就是如下:

固定元素

• 设置为 float:right
• 对其应用固定宽度

流体行元素

• 应用padding/margin-right等于固定元素的宽度
• 应用box-sizing:border-box,以使.row-fluid元素的100%宽度持续存在,但添加的边距/填充不会进一步推动它.下面的标记显示了您需要的最低标准.

CSS

#fixed-width { 
    width:100px;
    float:right;
}
#fluid.row-fluid {
    margin-right:100px;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;    
}

HTML

<div class="clearfix">
    <div id="fixed-width">Content...</div>
    <div id="fluid" class="row-fluid">
        <div class="span4">a</div>
        <div class="span4">b</div>
        <div class="span4">c</div>
    </div>
</div>