我有3个类似于answers.yahoo.com的列设计,我需要添加类似的滚动功能,我试过但是由于某种原因它不起作用
小提琴:fiddle.jshell.net/DTcHh/5821/
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-2" style="padding:0 5px!important;">
<div class="c-scroll" style="background-color:#333; width:100%; min-height:200px; margin-bottom:10px;">
<p>This is category bar</p>
<p>Question 1</p>
<p>Question 2</p>
<p>Question 3</p>
<p>Question 4</p>
<p>Question 5</p>
<p>Question 6</p>
<p>Question 7</p>
<p>Question 8</p>
<p>Question 9</p>
<p>Question 10</p>
<p>Question 11</p>
</div>
</div>
<div class="col-md-2 col-md-pull-8" style="height:auto; padding:0 5px!important;">
<div style="background-color:#333; width:100%; min-height:200px; margin-bottom:10px;">
<p>Featured Question</p>
</div>
<div style="background-color:#333;width:100%; min-height:200px; margin-bottom:10px;">
<p>Top Question</p>
</div>
</div>
<div class="col-md-2" style="min-height:200px; padding:0 5px!important;">
<div style="background-color:#333; width:100%; min-height:200px; margin-bottom:10px;">
<p>right column</p>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
使用bootstrap列类sm或xs作为小屏幕,如md:
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 col-md-push-2 col-sm-push-2" style="padding:0 5px!important;">
<div class="c-scroll" style="background-color:#333; width:100%; min-height:200px; margin-bottom:10px;">
<p>This is category bar</p>
<p>Question 1</p>
<p>Question 2</p>
<p>Question 3</p>
<p>Question 4</p>
<p>Question 5</p>
<p>Question 6</p>
<p>Question 7</p>
<p>Question 8</p>
<p>Question 9</p>
<p>Question 10</p>
<p>Question 11</p>
</div>
</div>
<div class="col-md-2 col-sm-2 col-md-pull-8 col-sm-pull-8" style="height:auto; padding:0 5px!important;">
<div style="background-color:#333; width:100%; min-height:200px; margin-bottom:10px;">
<p>Featured Question</p>
</div>
<div style="background-color:#333;width:100%; min-height:200px; margin-bottom:10px;">
<p>Top Question</p>
</div>
</div>
<div class="col-md-2 col-sm-2" style="min-height:200px; padding:0 5px!important;">
<div style="background-color:#333; width:100%; min-height:200px; margin-bottom:10px;">
<p>right column</p>
</div>
</div>
</div>
</div>