我想使用boostrap在垂直導航欄中生成並行導航欄效果使用網格系統

Question

您好我想讓我的垂直導航欄中的鏈接正確對齊，並將我當前的導航欄變成兩列右邊的鏈接和左邊的鏈接。 Here is a link to a jsfiddle with the navigation bar I am currently using.下面我將包含jsfiddle中包含的相關代碼。

HTML：

<nav class="navbar navbar-default" role="navigation"> 

<div class="navbar-header"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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" href="#">Brand</a> 
</div> 

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse navbar-ex1-collapse"> 
<ul class="nav navbar-nav"> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">RightLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">RightLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">RightLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">RightLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">RightLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">RightLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">RightLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
    <li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 

</ul> 
</form> 
    </li> 
</ul> 
</div><!-- /.navbar-collapse --> 
</nav> 

CSS：

@media (min-width: 768px) { 
    .navbar-collapse { 
    height: auto; 
    border-top: 0; 
    box-shadow: none; 
    max-height: none; 
    padding-left:0; 
    padding-right:0; 
    } 
    .navbar-collapse.collapse { 
    display: block !important; 
    width: auto !important; 
    padding-bottom: 0; 
    overflow: visible !important; 
    } 
    .navbar-collapse.in { 
    overflow-x: visible; 
    } 

    .navbar 
    { 
    max-width:300px; 
    margin-right: 0; 
    margin-left: 0; 
    }  

    .navbar-nav, 
    .navbar-nav > li, 
    .navbar-left, 
    .navbar-right, 
    .navbar-header 
    {float:none !important;} 

    .navbar-right .dropdown-menu {left:0;right:auto;} 
    .navbar-collapse .navbar-nav.navbar-right:last-child { 
    margin-right: 0; 
    } 
    } 

我想有兩個垂直行一個正確的鏈接和一個左鏈接。提前感謝您的時間。

真誠， fredk

Answer 1

你有兩個選擇。一，你可以錯開您的鏈接（不推薦），像這樣：

<li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
<li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">RightLink</a></li> 
<li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">LeftLink</a></li> 
<li><a class="col-xs-6 col-sm-6 col-md-6 col-lg-6"href="#">RightLink</a></li> 

這是一個問題，因爲一列可能會比其他更多的聯繫。

解決方案是擺脫定位標記中的格式，然後用定義列的div將無序列表標記封裝在那裏。像這樣：

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
    <ul class="nav navbar-nav"> 

     <li><a class=""href="#">LeftLink</a></li> 
     <li><a class=""href="#">LeftLink</a></li> 
...</ul></div> 

我在這的jsfiddle工作示例： http://jsfiddle.net/2ozehw1d/2/