Html 我正在尝试使用boostrap在垂直导航栏中生成平行导航栏效果，并使用栅格系统

嗨，我正试图让我的垂直导航栏中的链接正确对齐，并将我当前的导航栏变成两列右链接和左链接。下面我将包括JSFIDLE中包含的相关代码

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>

    @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;
   }
   }

我试图有两个垂直的行，一个用于右链接，一个用于左链接。提前感谢您抽出时间

真诚地，

---

弗雷德克你有两个选择。第一，你可以像这样错开你的链接（不推荐）：

这是一个问题，因为一列的链接可能比另一列多

解决方案是去掉锚标记中的格式，并用一个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>

…

我在这个JSFIDLE中有一个工作示例：

  <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>