bootstrap4添加滚动条

web开发中常常需要添加表格或者列表元素,但是如果元素内容过多就会占用太大的页面空间,不方便排版,所以滚动条的添加很重要。

                            <div class="col-md-6" style="margin: 0">
                                <!--<div class="row pre-scrollable">-->
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>词语</th>
                                            <th>数量</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr><tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr><tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                <!--</div>-->
                            </div>

以上这段代码的效果图为

如果将上述代码中的注释解开,即加上了

<div class="row pre-scrollable">

</div>

效果图就变成了这样

 

这样滚动条便添加成功了。


版权声明:本文为NullPE3351原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。