不滚动的自举列
问题描述:
我有一个使用bootstrap制作的网页,比如我在左边使用4列,右边使用6。我需要左边的4不滚动。我如何实现这个目标?不滚动的自举列
我知道我可以使用
class="affix"
在左边的列,但这个问题是,左边栏不再调整大小时的视口的大小变化。
答
这是一个解决方案。您需要设置overflow: auto
,并在右列定义div嵌套:
.cell {
background: lightgreen;
border: 1px solid teal;
height: 100vh;
overflow: auto;
}
.data_cont {
height: 200vh;
background: lightblue;
margin: 0 -15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-xs-offset-1 cell">
left column
</div>
<div class="col-xs-6 cell">
<div class="data_cont">data in the right column</div>
</div>
</div>
</div>
显示您的代码,请 –
试试这个http://*.com/questions/42017338/bootstrap-3-fixed侧的杆到全列宽度 –