ホームページ > 記事 > データベース > ブートストラップでフローティングスタイルをクリアする方法

ブートストラップでフローティングスタイルをクリアする方法

WBOYオリジナル: 2022-06-21 17:03:242168ブラウズ

ブートストラップでは、「.clearfix」補助クラスを使用してフローティングスタイルをクリアできます。補助クラスは、プロジェクト開発を支援するためにブートストラップによって提供されるツールクラスのセットです。フローティング要素をクリアするだけで済みます。クラス名を「.clearfix」に設定するだけで、構文は「」になります。

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

フローティングスタイルをクリアする方法in bootstrap

bootstrap はプロジェクト開発を支援するツールクラスのセットを提供します

フロントデスクは bootstrap で作られています。情報。

<div class="clearfix"></div>

フロートをクリアする必要がある場所にこれを追加するだけです。

例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 清除浮动</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
      向左快速浮动
   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮动
   </div>
</div>
</body>
</html>

出力結果:

ブートストラップでフローティングスタイルをクリアする方法

##補助クラスの設定:

<div class="clearfix"    style="max-width:90%">
<div class="clearfix" style="background:#58D3F7;">
      向左快速浮动
   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮动
   </div>
</div>

出力結果:

ブートストラップでフローティングスタイルをクリアする方法

ブートストラップでフローティングスタイルをクリアする方法

フローティング スタイルをクリアする方法in bootstrap

関連記事

フローティングスタイルをクリアする方法in bootstrap