在bootstrap nav-pill中使用div

时间:2016-01-14 01:40:13

标签: javascript jquery css twitter-bootstrap nav-pills

我试图让bootstrap nav-pills在移动视图中占用更少的空间,默认情况下它们叠加在一起。这使用了很多空间。我想要达到的目标是每行服用两粒药。 到目前为止,我已经完成了活动类的异常处理。当我点击药丸时,它会变得活跃,但不会使活跃的药物远离之前的活性药丸。

我使用的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中删除与药片有关的>以确保样式有效。由于李没有直接在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的专家,所以我需要帮助来弄清楚这是否可行。

由于

Rob

2 个答案:

答案 0 :(得分:1)

您只能使用CSS和HTML执行此操作。您遇到的问题是在nav 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;
}

答案 1 :(得分:0)

应该这样做!

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

JSFiddle