Question

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

我使用bootstrap 2.3.2

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

不会在所有屏幕尺寸上调整右列的大小。

Answer 1

我的基本解决方案（see it in action here）。我已经填充了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>

Answer 2

这种设计不是由bootstrap提供的，但有简单的解决方案。

这是一个，请参阅此前SO问题Bootstrap: Fixed gutter width in fluid layout?

的已接受答案

特别是这个css技巧

.fluid-fixed {
  margin-right: 240px;
  margin-left:auto !important;
}

如此小提琴http://jsfiddle.net/6vPqA/808/

所示

Bootstrap固定大小列

2 个答案: