アイテムを中心に配置した後にブートストラップが垂直に折りたたまれたとき

Question

私は自分のブートストラップnavbarに問題があります。私は最近、アイテムをNavbarに集中させる方法を見つけましたが、実際には、メニューが折りたたまれていると、これらのアイテムは垂直方向ではなく水平方向に配置されています。ここで

は私が現時点で持っているものです。

<div class="container-fluid"> 
<nav class="navbar navbar-inverse navbar-fixed-top fixfollow center"> 
    <div class="navbar-inner"> 
     <div class="container"> 

      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <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 hidden-lg" href="/"><i class="fa fa-home fa-lg"></i></a> 
      </div> 
      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 

        <li> 
         <a class="navbar-brand visible-lg" href="/"><i class="fa fa-home fa-lg"></i></a> 
        </li> 
        <li> 
         <a href="/link">link</a> 
        </li> 
        <li> 
         <a href="/link">link</a> 
        </li> 
        <li> 
         <a href="/link">link</a> 
        </li> 
        <li> 
         <a href="/link">link</a> 
        </li> 
        <li> 
         <a href="/link">link</a> 
        </li> 
       </ul> 
      </div> 
     </div> 

    </div> 
</nav> 

と重要なCSS：これにより

.center .nav, 
.center .nav > li 
{ 
    float:none; 
    display:inline-block; 
    /*display:inline; /* ie7 fix */ 
    /*zoom:1; /* hasLayout ie7 trigger */ 
    vertical-align: top; 
} 


.center .navbar-inner { 
    text-align:center; 
} 

.center .dropdown-menu { 
    text-align: left; 
} 

私は私の項目ナビゲーションバーの中央にはなくcollpasedメニューに水平に表示されています。メニューが折りたたまれていないときに中央に置かれたアイテムを変更することなく、ブートストラップの折りたたみメニューの古典的な振る舞い（私は垂直方向を意味する）を取り戻すために、それを変更するための助けが必要です。

Answer 1

単にメディアクエリの内部であなたのルールを適用します。

@media (min-width: 767px) { 
    YOUR RULES HERE 
} 

は、実施例スニペットを参照してください。

@media (min-width: 767px) { 
 
    .center .nav, 
 
    .center .nav > li { 
 
    float: none; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    } 
 
    .center .navbar-inner { 
 
    text-align: center; 
 
    } 
 
    .center .dropdown-menu { 
 
    text-align: left; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top fixfollow center"> 
 
    <div class="navbar-inner"> 
 
     <div class="container"> 
 

 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <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 hidden-lg" href="/"><i class="fa fa-home fa-lg"></i></a> 
 
     </div> 
 
     <div class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 

 
      <li> 
 
       <a class="navbar-brand visible-lg" href="/"><i class="fa fa-home fa-lg"></i></a> 
 
      </li> 
 
      <li> 
 
       <a href="/link">link</a> 
 
      </li> 
 
      <li> 
 
       <a href="/link">link</a> 
 
      </li> 
 
      <li> 
 
       <a href="/link">link</a> 
 
      </li> 
 
      <li> 
 
       <a href="/link">link</a> 
 
      </li> 
 
      <li> 
 
       <a href="/link">link</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </nav>

Answer 2

たぶん、ドロップダウン・メニューを持って.navbarヘッダによってクラス.dropdowメニューを（未設定だか）に変更してみてください。