Bagaimana untuk melaksanakan bar skrol dalam bootstrap

Kaedah pelaksanaan: 1. Gunakan kelas "

<div class="pre-scrollable">" untuk melaksanakan bar skrol 2. Gunakan "

"

Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 3.3.7, komputer DELL G3

Cara melaksanakan bar skrol dalam bootstrap

1: Tambahkan gaya bootstrap untuk menambah bar skrol

Malah, cuma tambahkan pra-tatal pada atribut kelas modul yang berkaitan.

Sebagai contoh, tambahkan pra-tatal dalam

:

<div class="pre-scrollable">

Salin selepas log masuk

Dua: Tambah bar skrol dengan menetapkan limpahan

< . >

<div   style="max-width:90%"https://img.php.cn/upload/image/676/898/602/1644890761462693.png" title="1644890761462693.png" alt="Bagaimana untuk melaksanakan bar skrol dalam bootstrap"/></p><pre class="brush:html;toolbar:false"><div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>

Salin selepas log masuk

Tiga: Hanya nyatakan atribut limpahan div sebagai auto terus, tetapi ketinggian div mesti ditentukan, seperti berikut:

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

Salin selepas log masuk

Jika anda mahu bar skrol mendatar muncul , maka: overflow-x:auto

Begitu juga, bar skrol menegak ialah: overflow-y:auto

Jika div disertakan dalam objek lain seperti td, kedudukan boleh ditetapkan kepada Relative: position: relative

Tiga: Hide scroll bar

{overflow: hidden !important;} atau {overflow-x: hidden; overflow-y: hidden;} masing-masing boleh menyembunyikan paksi-x Atau bar skrol paksi-y

Cadangan berkaitan:

tutorial bootstrap