使用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>
解决方法
对你的问题的简短回答是否定的. 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为例,了解您不应该使用它的原因.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。