8

I need to do fixed width right column column in bootstrap, but left column will be responsive.

I use bootstrap 2.3.2

enter image description here
(source: toile-libre.org)

Right column will not be resized at all screen size.

4

2 回答 2

8

下面是我的基本解决方案（在此处查看实际操作）。我已经用颜色填充了 CSS 来演示块，但你真正需要做的只是如下：

固定元件

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

流体行元素

  • 应用padding/margin-right等于固定元素的宽度
  • Apply 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>
于 2013-07-30T08:16:18.660 回答
1

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

这是一个，请参阅上一个 SO 问题Bootstrap: Fixed gutter width in fluid layout? 的公认答案？

特别是这个css技巧

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

如这个小提琴http://jsfiddle.net/6vPqA/808/所示

于 2013-07-30T08:10:40.193 回答