Bootstrap独立滚动,适用于3列设计

时间:2015-03-25 06:08:28

标签: html css twitter-bootstrap

我有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>

1 个答案:

答案 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>