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/

我正在尝试使用boostrap在利用网格系统的垂直导航栏中生成并行导航栏效果

1 个答案: