首頁 > web前端 > Bootstrap教程 > bootstrap怎麼實作捲軸

bootstrap怎麼實作捲軸

WBOY
發布: 2022-02-15 10:08:12
原創
6811 人瀏覽過

實作方法:1.利用「

<div class="pre-scrollable">」排版類別實作捲軸;2、利用「
”實作捲軸。

bootstrap怎麼實作捲軸

本教學操作環境:Windows10系統、bootstrap3.3.7版、DELL G3電腦

bootstrap怎麼實作捲軸

一:新增bootstrap樣式增加捲軸

其實只要在相關模組的class屬性中,再加上pre-scrollable 即可。

例如是在

中新增pre-scrollable:
<div class="pre-scrollable">
登入後複製

 bootstrap怎麼實作捲軸

二:透過設定overflow增加捲軸

<div   style="max-width:90%"https://img.php.cn/upload/image/676/898/602/1644890761462693.png" title="1644890761462693.png" alt="bootstrap怎麼實作捲軸"/></p><pre class="brush:html;toolbar:false"><div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>
登入後複製

記住寬和高一定要設定噢,否則不成的.這樣比較好的是,在寬和高不超出時,只是一條線.

bootstrap怎麼實作捲軸

三:直接為div指定overflow屬性為auto即可,但是必須指定div的高度,如下:

<div   style="max-width:90%"></div>
登入後複製

bootstrap怎麼實作捲軸

#如果要出現水平捲軸,則: overflow-x:auto

同理,垂直捲軸為: overflow-y:auto

如果該div被包含在其他物件例如td中,則位置可設為相對:position:relative

三:隱藏捲軸

{overflow: hidden !important;} 或{overflow-x: hidden; overflow-y: hidden;}可分別隱藏x軸或y軸的捲軸

相關推薦:bootstrap教學

以上是bootstrap怎麼實作捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板