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

Bootstrapのnavbar-left・navbar-rightクラスでナビバー内のコンポーネントを左寄せ・右寄せする方法

Bootstrapのナビバーでは、.navbar-left または .navbar-right ユーティリティクラスを使用することで、ナビリンク、フォーム、ボタン、テキストなどのコンポーネントを簡単に左寄せ・右寄せできます。

これらのクラスを要素に追加すると、指定した方向へCSSのfloatが適用され、ナビバー内の任意の位置にコンポーネントを柔軟に配置できるようになります。

主なユーティリティクラス

  • .navbar-left:コンポーネントをナビバーの左側に配置します(float:left が適用されます)
  • .navbar-right:コンポーネントをナビバーの右側に配置します(float:right が適用されます)

これらのクラスは、.nav navbar-nav(ナビゲーションリンク)、.navbar-form(フォーム)、.navbar-text(テキスト)などと組み合わせて使用します。複数のコンポーネントに対して個別に指定できるため、メニューは左、検索フォームやボタンは右といったレイアウトも自由に構築可能です。

実装例

以下のコードを実行すると、ドロップダウンメニュー・フォーム・テキストをそれぞれ左右に配置したナビバーの動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrapの例</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>
      <nav class = "navbar navbar-default" role = "navigation" style="background: orange;">
         <div class = "navbar-header">
            <a class = "navbar-brand" href = "#">Alignment</a>
         </div>
         <div>
            <!--左寄せ-->
            <ul class = "nav navbar-nav navbar-left">
               <li class = "dropdown">
                  <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
                     Java
                     <b class = "caret"></b>
                  </a>
                  <ul class = "dropdown-menu">
                     <li><a href = "#">jmeter</a></li>
                     <li><a href = "#">EJB</a></li>
                     <li><a href = "#">Jasper Report</a></li>
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                     <li class = "divider"></li>
                     <li><a href = "#">One more separated link</a></li>
                  </ul>
               </li>
            </ul>
            <form class = "navbar-form navbar-left" role = "search">
               <button type = "submit" class = "btn btn-default">左寄せ-送信ボタン</button>
            </form>
            <p class = "navbar-text navbar-left">左寄せ-テキスト</p>
            <!--右寄せ-->
            <ul class = "nav navbar-nav navbar-right">
               <li class = "dropdown">
                  <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
                     Java
                     <b class = "caret"></b>
                  </a>
                  <ul class = "dropdown-menu">
                     <li><a href = "#">jmeter</a></li>
                     <li><a href = "#">EJB</a></li>
                     <li><a href = "#">Jasper Report</a></li>
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                     <li class = "divider"></li>
                     <li><a href = "#">One more separated link</a></li>
                  </ul>
               </li>
            </ul>
            <form class = "navbar-form navbar-right" role = "search">
               <button type = "submit" class = "btn btn-default">
                  右寄せ-送信ボタン
               </button>
            </form>
            <p class = "navbar-text navbar-right">右寄せ-テキスト</p>
         </div>
      </nav>
   </body>
</html>

補足：Bootstrap 4以降での変更点

なお、Bootstrap 4以降では .navbar-left / .navbar-right クラスは廃止されています。代わりに、.mr-auto(要素を左寄せ)や .ml-auto(要素を右寄せ)といったマージンユーティリティ、あるいはFlexboxの配置クラス(.justify-content-between など)を使用することで、同様のレイアウトを実現できます。Bootstrap 3以前のプロジェクトを保守している場合には、本記事のコードがそのまま参考になります。

  1. 【CSS】align-contentでコンテナ内のグリッド全体を垂直方向に配置する方法

    CSS Gridレイアウトでは、align-contentプロパティを使うことで、コンテナ内のグリッド全体を垂直方向（ブロック軸）に自由に配置できます。グリッドトラックの合計サイズがコンテナの高さより小さい場合に生じる余白を、どのように分配するかをこのプロパティが制御します。 align-contentの主な値 center … グリッド全体をコンテナの中央に配置 start … コンテナの先頭に配置 end … コンテナの末尾に配置 space-between … 最初と最後の行を両端に揃え、残りの行を均等に配置 space-around … 各行の前後に均等な余白を配置 space-e

  2. C#のObjectクラスとは？全クラスの基底クラスと主要メソッドを徹底解説

    C#におけるObjectクラスは、すべてのクラスの継承階層において最も上位に位置する基底クラス（ルートクラス）です。C#で定義されるあらゆる型は、明示的に指定しなくても自動的にObjectクラスを継承しており、そのためすべてのオブジェクトはObjectクラスが提供するメソッドを利用できます。Objectクラスの主なメソッド一覧Objectクラスには、以下のような重要なメソッドが用意されています。番号メソッドと説明1Equals(Object)指定されたオブジェクトが、現在のオブジェクトと等しいかどうかを判定します。2Equals(Object, Object)指定された2つのオブジェクトインス