web-dev-qa-db-ja.com

Bootstrap 3左側のナビゲーションバー項目の左側にあるナビゲーションバーの折りたたみメニュー

私はBootstrap 3ナビゲーションバーに左ナビゲーションアイテムと右ナビゲーションアイテムがあります（以下を参照））。

Left and Right nav items

折りたたまれているときは、navbar-toggle（「ハンバーガーメニュー」とも呼ばれます）とそのアイテムの両方を左揃えにします。

これまでの私のコード：

<nav class="navbar navbar-default custom-navbar" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

左側にnavbar-toggleがあるCSSは次のとおりです。

@media (max-width:767px) {
    .custom-navbar .navbar-right {
        float: right;
        padding-right: 15px;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li {
        float: left;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li > a {
        padding:8px 5px;
    }
    .custom-navbar .navbar-toggle {
        float: left;
        margin-right: 0
    }
    .custom-navbar .navbar-header {
        float: left;
        width: auto!important;
    }
    .custom-navbar .navbar-collapse {
        clear: both;
        float: none;
    }
}

アイテムを揃えるために "pull-right"スタイルを追加しましたが、成功しませんでした。

「navbar-right」はうまく機能しません。実際、これにより、右側のアイテムが両方とも同じ行に配置されます。 「pull-right」を使用すると、それらは単一の行として機能しますが、依然として右側に留まります。

これは私に残します：

  • 左側のハンバーガーメニュー（必要に応じて）、
  • 左側のナビゲーションバーの左側のアイテム（必要に応じて）、
  • ナビゲーションバーの右側のアイテムはまだ右側にあります（これを修正してください！）。

最終結果：

The last two elements are still on the right

コードスニペットは here です。

javascripthtmlcsstwitter-bootstrap-3navbar
10
loretoparisi

CSSとマークアップにいくつかの調整を加えましたが、これらは here で確認できます。

私が指摘したいのは、pull-rightおよびその他のpullおよびPushクラスは、グリッド列を再配置するためのものです。

4
Daniel Waghorn

!importantプルライトのデフォルトの動作を上書きするルール。

@media (max-width:767px) {
 .nav.navbar-nav.pull-right {
   float: left !important;
 }
}

<768pxデバイスでの出力：

Left aligned right text

Bootply

3
Manoj Kumar