html - 我正在尝试使用 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;
   }
   }

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

真诚的，弗雷德克

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>

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

解决方案是摆脱 anchor 标记中的格式，并用定义列的 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/