我使用bootstrap 3进行样式设置，并且有两个div：
<div class="container">
<div class="row">
<div id="sidebar" class="col-md-3"></div>
<div id="main" class="col-md-9"></div>
</div>
</div>
我将.container样式更改为width:96%
现在我想要（对于大型和台式设备）：
sidebar 具有固定宽度
和maindiv获取剩余的剩余空间
我怎样才能做到这一点？
编辑：和固定宽度，我的意思是#sidebar{ width:245px; }不是百分比
尝试以下CSS并根据您的要求更改不同的值。
#sidebar{
background:#DDD;
}
#main{
background:#999;
}
@media screen and (min-width: 1100px) {
.row{/*this selector should not be row as you may be using row for other objects too*/
display:table;
width:100%;
padding:0px;
}
#sidebar.col-md-3{
padding:0px;
margin:0px;
display:table-cell;
width:250px;
background:red;
}
#main.col-md-9{
padding:0px;
margin:0px;
display:table-cell;
background:green;
}
}
编辑：给侧边栏提供固定宽度（以像素为单位），并且不分配给右div
还有另一种方法可以不使用自定义css
<div class="container">
<div class="row">
<div class="col-xs-3 col-lg-3 bg-success" style="width:200px;">sdfsf</div>
<div class="container-fluid bg-warning">fluid</div>
</div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句