Bootstrap 固定大小列答案

【问题标题】：Bootstrap fixed size column [closed]Bootstrap 固定大小列
【发布时间】：2013-07-30 07:52:44
【问题描述】：

我需要在引导程序中做固定宽度的右栏，但左栏会响应。

我使用引导程序 2.3.2

_{（来源：toile-libre.org）}

在所有屏幕尺寸下都不会调整右栏的大小。

【问题讨论】：

这将如何工作？你所说的“响应式”是什么意思（你的意思是它会像正常的引导程序一样在 797 像素处分解）？
右栏在所有屏幕尺寸下都不会调整大小
为什么投反对票？对我来说似乎是一个有效的编程问题
可以显示你为容器、左列和右列使用了哪些引导类？

标签： html css twitter-bootstrap twitter-bootstrap-2

【解决方案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>

【讨论】：

【解决方案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/所示

【讨论】：