0

我试图让引导导航药丸在移动视图中占用更少的空间，默认情况下它们相互堆叠。这会占用大量空间。我想要实现的是每行获得两粒药丸。到目前为止，除了活动课程之外，我已经完成了所有工作。当我单击一个药丸时，它会变为活动状态，但不会使活动类远离前一个活动药丸。

我正在使用的html是：

<ul class="nav nav-pills nav-justified" role="tablist">
   <div class="row">
      <div class="col-xs-6">
        <li role="presentation" class="active"><a href="#club" aria-controls="home" role="tab" data-toggle="tab">The Club</a></li>
        <li role="presentation"><a href="#mens" aria-controls="profile" role="tab" data-toggle="tab">Men's Captains</a></li>
        <li role="presentation"><a href="#womens" aria-controls="messages" role="tab" data-toggle="tab">Ladies' Captains</a></li>
      </div>
      <div class="col-xs-6">
        <li role="presentation"><a href="#stash" aria-controls="settings" role="tab" data-toggle="tab">Stash Captain's</a></li>
        <li role="presentation"><a href="#socialsecs" aria-controls="settings" role="tab" data-toggle="tab">Social Sec's</a></li>
        <li role="presentation"><a href="#experiance" aria-controls="settings" role="tab" data-toggle="tab">Hockey Experience</a></li>
      </div>
   </div
</ul>

我必须>从与药丸相关的 CSS 中删除，以确保样式有效。因为 li 没有直接在 ul 之后。所以这一切都很好。

.nav li a {
 position: relative;
 display: block;
 padding: 10px 15px;
}
.nav li a:hover,
.nav li a:focus {
 text-decoration: none;
 background-color: #eee;
}
.nav li.disabled a {
 color: #777;
}
.nav-pills li {
 float: left;
}
.nav-pills li a {
 border-radius: 4px;
}
.nav-pills li + li {
 margin-left: 2px;
}
.nav-pills li.active a,
.nav-pills li.active a:hover,
.nav-pills li.active a:focus {
 color: #fff;
 background-color: #337ab7;
}
.nav-justified {
 width: 100%;
}
.nav-justified li {
 float: none;
}
.nav-justified li a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-justified .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}

我现在唯一能想到的问题是，当活动切换工作时，可能<div class="row">...</div>会<div class="col-xs-6">...</div>妨碍 bootstrap.js 文件。

但是..我不是 JavaScript 专家，你可能会说，所以我需要帮助来确定这是否可能。

谢谢

抢

4

2 回答 2

1

您可以仅使用 CSS 和 HTML 来执行此操作。您遇到的问题是在导航 li 中添加一行和 col-xs-6 div。li 元素期望 ul/ol 标记作为其直接子级 - Bootstrap 确实如此。

解决问题的方法是删除 ul 中的那些额外 div，然后在 li 上使用 display: inline-block ，将它们的宽度设置为 49%。出于某种原因，将两个元素保持在同一行上的比例必须小于 50%。

这是更改后的 HTML 代码：

<ul class="nav nav-pills nav-justified" role="tablist">
    <li role="presentation" class="active"><a href="#club" aria-controls="home" role="tab" data-toggle="tab">The Club</a></li>
    <li role="presentation"><a href="#mens" aria-controls="profile" role="tab" data-toggle="tab">Men's Captains</a></li>
    <li role="presentation"><a href="#womens" aria-controls="messages" role="tab" data-toggle="tab">Ladies' Captains</a></li>
    <li role="presentation"><a href="#stash" aria-controls="settings" role="tab" data-toggle="tab">Stash Captain's</a></li>
    <li role="presentation"><a href="#socialsecs" aria-controls="settings" role="tab" data-toggle="tab">Social Sec's</a></li>
    <li role="presentation"><a href="#experiance" aria-controls="settings" role="tab" data-toggle="tab">Hockey Experience</a></li>
</ul>

这是关键的CSS：

.nav-justified li {
   width: 49%;
   display: inline-block;
}
于 2016-01-14T02:26:21.930 回答
0

这应该做！

$(function(){
  $('li[role="presentation"]').on('click', function(e){
    $('ul[role="tablist"] li').removeClass('active');
    $(this).addClass('active');
  })
})

JSFiddle

于 2016-01-14T01:53:26.990 回答