JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Bootstrapでfloatを解除する方法：clearfixクラスの使い方を解説

Bootstrapでfloat（回り込み）を解除するには

Bootstrapでは、要素のfloat（フロート・回り込み）を解除したい場合、.clearfix クラスを使用します。このユーティリティクラスを親要素に適用するだけで、子要素に指定された float: left や float: right の影響を簡単に解消できます。

floatはレイアウトを組む際に便利なプロパティですが、解除しないままにすると親要素が子要素の高さを認識できず、背景やボーダーが崩れる原因になります。clearfixを使えば、こうした問題を余分なHTML要素やCSSを追加することなく解決できます。

.clearfixの基本構文

<div class="clearfix">
  <!-- floatが指定された子要素 -->
</div>

実装例

以下のコードでは、親要素に clearfix を、子要素には左寄せ用の pull-left と右寄せ用の pull-right をそれぞれ指定しています。実際にブラウザで実行して、floatが正しく解除される様子を確認してみてください。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Example</title>
        <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
        <script src = "/scripts/jquery.min.js"></script>
        <script src = "/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class = "clearfix" style = "background: orange;border: 1px solid #000; padding: 10px;">
            <div class = "pull-left" style = "background: blue; color: white;">
               left
            </div>
            <div class = "pull-right" style = "background: blue; color:white;">
               right
            </div>
        </div>
    </body>
</html>

バージョンによる違いに注意

上記の例で使用している pull-left / pull-right はBootstrap 3のクラス名です。Bootstrap 4以降では、これらは float-left / float-right に名称が変更されています。また、Bootstrap 5では clearfix は独立したユーティリティとして引き続き利用可能です。使用しているBootstrapのバージョンに合わせて、適切なクラス名を選択してください。

  1. Bootstrapで作る分割ボタン（スプリットボタン）のドロップダウン実装方法

    分割ボタンのドロップダウンは、通常のドロップダウンボタンと同じ基本スタイルをベースにしながら、主要なアクション（プライマリアクション）を組み合わせたUIコンポーネントです。ボタンの左側にはメインとなるアクションが配置され、右側のトグル部分をクリックするとドロップダウンメニューが展開される仕組みになっています。実装例以下のコードを実行すると、分割ボタンのドロップダウンを実際に確認できます。<!DOCTYPE html> <html>     <head>      &nb

  2. JavaScriptでクリックした要素にアクティブクラスを追加する方法

    Webページのボタンやタブメニューなどでは、現在選択されている要素を視覚的に強調表示したいケースがよくあります。JavaScriptを使えば、クリックされた要素に「active」クラスを動的に追加し、それまでアクティブだった要素からクラスを外すことで、この処理を簡単に実装できます。実装のポイント基本的な流れは以下のとおりです。querySelectorAll() ですべてのボタン要素を取得する各ボタンに addEventListener() でクリックイベントを登録するクリック時に、既存の「active」クラスを持つ要素からクラスを削除するクリックされた要素に「active」クラスを追加するサ