web-dev-qa-db-ja.com

Bootstrapロゴまたはブランド名のテキストを含む完全なレスポンシブナビゲーションバー

Twitter Bootstrap 3.1.1で指定された高さで完全なレスポンシブnavbarを実行したいのですが、ブランドは画像（ロゴ）またはテキストで構成できます。

html：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">

                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
            <a class="navbar-brand" href="#">
                <img src="http://placehold.it/150x50&text=Logo" alt="">
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

css：

body {
    margin-top: 125px;
}

.navbar-fixed-top .nav {
    padding: 15px 0;
}

問題は、ブラウザのウィンドウサイズが小さくなり、メニューが折りたたまれると、navbarが元の高さに戻り、ロゴ画像が次のようになることです。

before collapsing

after collapsing

もう1つの問題は、<img src="http://placehold.it/150x50&text=Logo" alt="">を<h3>AppName</h3>に変更すると、AppNameが途中にないことです。

after collapsing

現在、それはパディング値を設定することによって中央に置かれていますが、それを独立させる方法がわかりません。

誰も私がこの問題を解決するのを助けることができますか？

よろしく

編集：

ここに私が達成したい効果の準備された画像があります：

ロゴ画像で折りたたまれていないナビゲーションバー：

before collapsing

折りたたまれたnavbar（同じ高さのnavbar、同じサイズの画像、異なる幅od navbar）：

collapsed navbar

ブランド名のテキストで折りたたまれていないnavbar：

not collapsed

折りたたまれたnavbar（ブラウザのウィンドウ幅の変更によって引き起こされるnavbarの幅を除くすべてが同じです）：

collapsed

twitter-bootstraptwitter-bootstrap-3responsive-designnavbar
36
Hladeo

this （ウィンドウのサイズを変更してモバイルバージョンを表示する方法を確認できます）を実現するには、2つのロゴイメージ（デスクトップ用とモバイル用）を用意するだけです。 visible-xsおよびhidden-xsクラスを使用して、環境に応じてそれらを表示します。

だから私はこのようなものを使用しました：

<img class="hidden-xs" src="http://placehold.it/150x50&text=Logo" alt="">
<img class="visible-xs" src="http://placehold.it/120x40&text=Logo" alt="">

そしてもちろん、私は以下を使用してモバイルロゴをスタイルしました：

@media (max-width: 767px) { 
    .navbar-brand {
        padding: 0;        
    }

    .navbar-brand img {
        margin-top: 5px;
        margin-left: 5px;
    }
}

すべてのコードを見ることができます こちら 。ロゴが組み込まれたモバイル版のテキストが必要な場合、大したことではありません。ロゴを<h1 class="visible-xs">AppName</h3>に置き換え、メディアクエリ内のスタイルを次のように変更します。

@media (max-width: 767px) { 
    .navbar-brand {
        padding: 0;        
    }

    .navbar-brand h1{
        //here add your style depending of the position you want the text to be placed
    }
}

編集：

動作させるには次の条件が必要です。

.navbar-toggle {
   margin: 23px 0; 
}

.navbar-nav, .navbar-nav li, .navbar-nav li a {
  height: 80px;
  line-height: 80px;
}

.navbar-nav li a {
  padding-top: 0;
  padding-bottom:0;
}
30
paulalexandru

navbar-innerクラスとコンテナー内にブランドロゴを追加する最適な方法。 <h3>の問題<h3>については、@ creimersが言ったように、bootstrapで特定のパディングが指定されています。また、より大きな画像を使用している場合は、ナビゲーションバーの高さも大きくすると、ロゴが外側に浮き上がります。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner"> <!--changes made here-->
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">

                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
            <a class="navbar-brand" href="#">
                <img src="http://placehold.it/150x50&text=Logo" alt="">
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
</nav>
2
Yogendra Rawal

含めるプレースホルダー画像の高さは50pxです。 padding-topの15pxと50pxの高さを持つanchor (.navbar-brand)でラップされます。そのため、プレースホルダーのロゴはバーから流れ出します。小さい画像を含めるか、classで参照できるidまたはcssを割り当てて、アンカーのパディングを試してください。

EDITまたはheight: 50pxから静的.navbar-brandを削除します。これで、ナビゲーションバーは最も高い子の高さになります。

h3のbootstrapには、デフォルトでpadding-top of 20pxがあります。繰り返しますが、padding-top: 15pxアンカーでラップされます。それが、あなたが望むように、それが垂直方向に中央にない理由です。 h3にclassを、またはidにマージントップをリセットすることもできます。 paddingのanchorでも同じことができます。

遊び方は次のとおりです。 http://jsbin.com/jelec/1/edit?html,output

0
creimers

私はチェックし、それは私のために働いた。

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:100px;"><!--style with margin-top according to your need-->
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
0
waterbrain

そのロゴを追加する場所の高さと幅を設定するだけです。私は試してみました

0
Pooja Khatri