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

BootstrapのClearfix（クリアフィックス）クラスの使い方

Bootstrapでは、.clearfixクラスを使用することで、要素に適用されたフロート（float）を簡単に解除できます。フロートを解除しないままにすると、親要素の高さが正しく計算されず、レイアウトが崩れる原因となります。clearfixは、こうした問題を防ぐための便利なユーティリティクラスです。

使用例

以下のコードを実行して、clearfixクラスの動作を確認してみてください。

<!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:#58D3F7;">
            Quick Float to left
         </div>
         <div class = "pull-right" style = "background: #DA81F5;">
            Quick Float to right
         </div>
      </div>
   </body>
</html>

この例では、親要素のdivにclearfixクラスを適用し、その中にpull-left（左寄せ）とpull-right（右寄せ）でフロートさせた2つの要素を配置しています。clearfixクラスによってフロートが解除されるため、親要素は子要素の高さを正しく保持し、背景やボーダーが意図した通りに表示されます。

なお、pull-leftやpull-rightはBootstrap 3のクラスです。Bootstrap 4以降では、それぞれfloat-left、float-rightに置き換えられている点に注意してください。

  1. C#のConsoleクラスとは？主要プロパティの使い方を実例付きで解説

    C#のConsoleクラスは、コンソールアプリケーションにおける標準入力・標準出力・標準エラー出力の各ストリームを表すクラスです。テキストの表示や入力の読み取りだけでなく、文字色や背景色の変更、カーソル位置やサイズの制御など、コンソール操作に関するさまざまな機能が提供されています。ここでは、Consoleクラスの代表的なプロパティの使い方を、サンプルコードと実行結果とあわせて解説します。Console.CursorLeftプロパティコンソール上のカーソル位置（左端から数えた列位置）を変更するには、Console.CursorLeftプロパティを使用します。サンプルコードusing System

  2. 【C#】Tuple<T1, T2, T3, T4, T5, T6>クラスの使い方を徹底解説

    C#のTuple<T1, T2, T3, T4, T5, T6>クラスとは Tuple<T1, T2, T3, T4, T5, T6> クラスは、6 つの要素を持つ「6 タプル」を表します。タプルとは、複数の要素を順序付けてひとまとめに格納できるデータ構造で、各要素にはそれぞれ異なる型を指定できます。 このクラスは、次のような場面で活用されます。 データセットへのシンプルなアクセス データセットの容易な操作 単一のデータセットとしての表現 メソッドから複数の値を返したい場合 メソッドに複数の値を渡したい場合 主要な6つのプロパティ Tuple<T1, T2,