BootStrap系列教程之div增加滚动条

需求

在一个带有滚动条的p中展示列表。

环境

Bootstrap版本：v3.3.7

IDE及版本：IntelliJ IDEA 2017.3.4

要点

p加上.pre-scrollable样式，可在垂直方向展示滚动条，再通过设置height样式，可根据内容适时出现滚动条。

主要代码

<p class="pre-scrollable" style=" height:100px; overflow:auto">
                <table class="table table-striped table-condensed table-hover">
                    <tr>
                        <th>#</th>
                        <th>备选内容</th>
                    </tr>

                    <tr>
                        <td>
                            <input type="checkbox" id="inlineCheckbox1" value="option1">
                        </td>
                        <td>
                            <span>Data</span>
                            <span class="pull-right">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" id="testInput1" value="option1"> texrDescribe
                                    </label>
                            </span>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <input type="checkbox" id="inlineCheckbox2" value="option1">
                        </td>
                        <td>
                            <span>Data</span>
                            <span class="pull-right">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" id="testInput2" value="option1"> texrDescribe
                                    </label>
                            </span>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <input type="checkbox" id="inlineCheckbox3" value="option1">
                        </td>
                        <td>
                            <span>Data</span>
                            <span class="pull-right">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" id="testInput3" value="option1"> texrDescribe
                                    </label>
                            </span>
                        </td>
                    </tr>
                </table>
            </p>

效果