2016-01-09 11 views
12

私はかなり長い間、ナビゲーションバー用の.navbar-headerクラスのブートストラップを使用していましたが、どうしてこんなに不思議に思うことはありませんでした。私はなぜそれを使用するのかについてオンラインで検索しましたが、何の説明も見つかりませんでした。誰かがその目的は何かを説明することができますか?ブートストラップで "navbar-header"クラスは何をしますか?

<nav class="navbar navbar-inverse "> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a href="#" class="navbar-brand"> 
     Website Name 
     </a> 
    </div> 
    </div> 
</nav> 
+9

男は本当の質問をします。答えが見つからず、彼は下降してしまいます。何がこの世界に来たのですか?まあ! – Sift

答えて

11

navbar-headerは、主にブートストラップnavbarのアーキテクチャクラスです。ナビゲーションバーの左に約150ピクセルを割り当て、ナビバーブランドをラップし、ブランド名またはロゴがクリックまたはホバー上の全領域を使用できるようにします。しかし、navbar-headerの最も有益な特性は、768px(タブレットビュー)以降の100%幅に対する応答性です。これにより、ブランドをビューポートの中央に配置することができます。これは、ブランドを開く際に反応しやすいメニューを重複させないようにするのはきわめて簡単です。 EDIT - > navbar-brandは100%幅に反応しません。

しかし、それは本質的に機能を実行しないので、ウェブ上のこのクラスについてほとんど言われていません。ほとんどの人は、それを一人で置き換えたり、置き換えたり、navbar-brandや他の要素を対象とするフック(親)クラスとして使用します。

関連する問題