How to implement scroll bars in bootstrap

Implementation method: 1. Use the "

<div class="pre-scrollable">" typesetting class to implement the scroll bar; 2. Use "

" implements the scroll bar.

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

How to implement scroll bars in bootstrap

1: Add bootstrap style to add scroll bars

In fact, just add pre-scrollable to the class attribute of the relevant module.

For example, add pre-scrollable in

:

<div class="pre-scrollable">

Copy after login

2: Add scroll bar by setting overflow

<div   style="max-width:90%"https://img.php.cn/upload/image/676/898/602/1644890761462693.png" title="1644890761462693.png" alt="How to implement scroll bars in bootstrap"/></p><pre class="brush:html;toolbar:false"><div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>

Copy after login

Remember that the width and height must be set, otherwise it will not work. The better thing is that when the width and height do not exceed, it is just a line.

Three: Just specify the overflow attribute for the div as auto directly, but you must specify the height of the div, as follows:

<div   style="max-width:90%"></div>

Copy after login

If you want a horizontal scroll bar to appear, then: overflow-x:auto

Similarly, the vertical scroll bar is: overflow-y:auto

If the div is included in other objects such as td, the position can be set to relative: position:relative

3: Hide scroll bar

{overflow: hidden !important;} or {overflow-x: hidden; overflow-y: hidden;} can hide the x-axis or y-axis scroll bar respectively

Related recommendations: bootstrap tutorial