ブートストラップでスクロールバーを実装する方法

WBOY
リリース: 2022-02-15 10:08:12
オリジナル
6777 人が閲覧しました

実装方法: 1. "

<div class="pre-scrollable">" 組版クラスを使用してスクロール バーを実装します。 2. "
" はスクロール バーを実装します。

ブートストラップでスクロールバーを実装する方法

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

スクロール バーを実装する方法bootstrap

1: ブートストラップ スタイルを追加してスクロール バーを追加します

実際には、関連するモジュールの class 属性に pre-scrollable を追加するだけです。

たとえば、

に事前スクロール可能を追加します:
<div class="pre-scrollable">
ログイン後にコピー

ブートストラップでスクロールバーを実装する方法

2: overflow を設定してスクロール バーを追加します

<div   style="max-width:90%"brush:html;toolbar:false"><div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>
ログイン後にコピー

幅と高さを設定する必要があることに注意してください。設定しないと機能しません。さらに良い点は、幅と高さが超えない場合、単なる線になることです。

ブートストラップでスクロールバーを実装する方法

# 3: div のオーバーフロー属性を auto として直接指定するだけですが、次のように div の高さを指定する必要があります:

<div   style="max-width:90%"></div>
ログイン後にコピー

ブートストラップでスクロールバーを実装する方法

水平スクロール バーを表示したい場合は、overflow-x:auto

同様に、垂直スクロール バーは次のようになります。overflow-y:autoブートストラップでスクロールバーを実装する方法

div が他のオブジェクトに含まれている場合td などの場合、位置は相対に設定できます:position:relative

3: スクロール バーを非表示

{overflow: hidden ! important;} または {overflow-x: hidden; overflow- y: hidden;} は、x 軸または y 軸のスクロール バーをそれぞれ非表示にできます

関連する推奨事項:

ブートストラップ チュートリアル

以上がブートストラップでスクロールバーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート