使用bootstrap 2,在左侧使用静态宽度列并使右列成为流体的最简单方法是什么.这样的东西有200 px宽度左列和右边填充
浏览器窗口.
浏览器窗口.
====================== Hello ====================== A | B | 100% 200px| D | E | F |
我尝试将min-width添加到常规容器布局中,但在调整大小时它有一些奇怪的行为：
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">Hello</div>
</div>
<div class="row-fluid">
<div class="span2" style="min-width:200px">Left Column</div>
<div class="span10">Right Column</div>
</div>
</div>
这里有一个JS小提琴,虽然js小提琴本身的四重布局似乎在添加自己的行为.
解决方法
对你的问题的简短回答是否定的. Bootstrap 2使用媒体查询和百分比度量来实现其响应式网格布局.尝试使用Bootstrap 2进行混合方法是完全多余的.
你可以尝试这种方法.使用float：left;在左栏上并给出一个填充左：200px;到了正确的栏目就是这样.你画了你的布局.在底部添加了clearfix,以便将来可以使用页脚.这样您就可以继续支持大多数浏览器.
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 header">Hello</div>
</div>
<div class="row-fluid">
<div class="span2 left-col">Left Left Left Left Left Left Left</div>
<div class="span10 right-col">Right Right Right Right Right Right Right </div>
</div>
</div>
<div class="clearfix"></div>
CSS
.header{
background-color:#f00;
}
.left-col{
background-color:#0f0;
float:left;
width:200px;
height:400px;
}
.right-col{
background-color:#00f;
height:400px;
padding-left:200px;
}
之后,您可以使用Javascript动态调整窗口大小调整左侧列宽和右侧列填充.
您可能还想考虑以下备选方案：
1. Calc()(仅限IE9)
如果您不关心IE8支持,这是实现它的最简单方法.你可以学习如何here
2.媒体查询(仅限IE9)
您可以像Bootstrap一样使用媒体查询但不能使用百分比度量来实现您所需的内容.您可以使用它来更改css属性值,并以此方式使其响应(使用您的自定义限制).
3. FlexBox(仅限IE10(部分IE9))
由于浏览器的支持,现在会很棒但不推荐.
4.表格
以this thread为例,了解您不应该使用它的原因.
