web-dev-qa-db-ja.com

Bootstrap navbar justify / spanメニュー項目が全幅を占める

デフォルトのTwitter Bootstrapレスポンシブnavbar（ロゴと検索なし）を使用しますが、メニューバーの幅全体を占めるようにメニュー項目を広げたいです。

ここに、デフォルトのBootstrap navbar（スペースとして---を参照）：

[home | menu item 1 | menu item 2 | menu item 3 | contact------------------------]

そして、私が望む結果（メニュー項目が全幅を占める）：

[--home-- | ---menu item 1--- | ---menu item 2--- | ---menu item 3--- | -contact-]

誰かが助けてくれることを願っています。

htmltwitter-bootstrapnavbar
28
user2024774

Bootstrapの 公式例 をご覧ください。

/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}

.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .75);
    border-right: 1px solid rgba(0, 0, 0, .1);
}

.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}
32
sgrodzicki

これらのメニュー項目をネイティブのドロップダウンコールで使用するまで、公式の例は完全に機能します。ドロップダウンは、すべてのドロップダウン項目を合わせた幅になります。

*「>」に注意してください。スタイルが.dropdown-menuサブセットにブリードオーバーするのを防ぎます。

/* Customize the navbar links to be fill the entire space of the .navbar */

.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav > li {
    display: table-cell;
    width: 1%;
    float: none;
    text-align: center;
}


.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}
8
Seif Thompson-Doss
.nav {
  display:table;
}
.nav > li{
  width: auto;
  display:table-cell;
}

"width：auto;"問題を解決しました

7
Veikko Karsikko

別の解決策：各アイテムのメニューパディングを調整するメディアクエリ：

@media (max-width: 1200px) {

  .navbar .nav > li {
      padding: 0 4px 0 3px;
  }

}

@media (min-width: 1200px) {

  .navbar .nav > li {
      padding: 0 20px 0 20px;
  }

}
4
Jonathan James

この最後の例は、私にとっても機能しません。ドロップダウンメニューは常に最初のli要素に表示されます。

jqueryでメインのli要素の幅を設定することは、私にとっては唯一のことで、

setNavWidth: function(){
    var wi = parseInt(($('#navcontainer').width()-48)*.25);
    for( var i = 0 ; i < 4; i++){
        $('#carvernavli_'+i).width(wi);
    }

}

だから私は4つの主要なli要素を持ち、それらにidを与えました。「navcontainer」は、「navbar-inner」の直下のナビゲーションをラップするコンテナです。また、ウィンドウのサイズ変更時にこの関数を呼び出す必要があります。

1
Ray

最終的にはわずかなバリアントを使用することになり、_display:table_の使用が気に入らず、代わりにflexboxを使用したいと考えました。

CSS：

_.navbar .nav {
    margin: 0;
    display: flex;
    flex-direction: row;
    width: 85%;
}

.navbar .nav li {
    flex: 1;
}

.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    flex: 1;
}
_

HTML：

_<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      {% block header %}
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <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="/">MySite</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/">Home</a></li>
          <!-- <li><a href="/submit">Submit</a></li> -->
          <li><a href="/vendors">Vendors</a></li>
          <li><a href="/news">News</a></li>
          <li><a href="/about">About</a></li>
          <form class="navbar-form navbar-left" action="/action_page.php">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search">
              <div class="input-group-btn">
                <button class="btn btn-default" type="submit">
                  <i class="glyphicon glyphicon-search"></i>
                </button>
              </div>
            </div>
          </form>
        </ul>
      </div><!--/.nav-collapse -->
      {% endblock %}
    </div>
  </nav>
_

結果： result.gif

0
Tim P