Question

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

Answer 1

使用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>

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

1 个答案: