引導3 - 電網2列中的Navbar

Question

我有一個這樣的導航（簡化的）：

Codeply Link

  <ul class="nav navbar-nav"> 
       <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-xs-6"> 
          <li>foo</li> 
         </div> 
         <div class="col-xs-6"> 
          <li>bar</li> 
         </div> 
        </div> 
       </div> 
      </ul> 

在結果列表中的菜單項移動例如在彼此的頂部上堆疊：

| foo |
| bar |

我的大腦告訴我它應該在移動設備上。 | foo | bar |

最後應該看起來像this的例子。 （手機導航）

Answer 1

您可以簡單地使用列表項到位的div像這樣

<ul class="nav navbar-nav hidden-lg hidden-md test"> 
    <li><a href="../navbar-static-top/">asdf</a></li> 
    <li><a href="../navbar-static-top/">asdf</a></li> 
</ul> 

更新

你overflow-child類約束了100％的寬度

.overflow-child { 
    /*width: 100%;*/ 
    height: 100%; 
    overflow: auto; 
    padding-right: 15px; 
}