I need to do fixed width right column column in bootstrap, but left column will be responsive.
I use bootstrap 2.3.2
(source: toile-libre.org)
Right column will not be resized at all screen size.
I need to do fixed width right column column in bootstrap, but left column will be responsive.
I use bootstrap 2.3.2
(source: toile-libre.org)
Right column will not be resized at all screen size.
下面是我的基本解决方案(在此处查看实际操作)。我已经用颜色填充了 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>
这种设计不是bootstrap提供的,但有简单的解决方案。
这是一个,请参阅上一个 SO 问题Bootstrap: Fixed gutter width in fluid layout? 的公认答案?
特别是这个css技巧
.fluid-fixed {
margin-right: 240px;
margin-left:auto !important;
}