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">

2: Add scroll bar by setting overflow

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

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>

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

The above is the detailed content of How to implement scroll bars in bootstrap. For more information, please follow other related articles on the PHP Chinese website!