在 bootstrap nav-pill 中使用 div
Using div inside of bootstrap nav-pill
我正在尝试让 bootstrap 导航丸在移动设备视图中占用更少 space,默认情况下它们会堆叠在一起。这样使用快很多space。我想要达到的目标是每行服用两颗药丸。
到目前为止,除了活动 class 之外,我已经完成了所有工作。当我单击一个药丸时,它会变为活性药丸,但不会将活性药丸 class 与之前的活性药丸分开。
我使用的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 方面的专家,您可能会说,所以我需要帮助来弄清楚这是否可行。
谢谢
抢
应该这样做!
$(function(){
$('li[role="presentation"]').on('click', function(e){
$('ul[role="tablist"] li').removeClass('active');
$(this).addClass('active');
})
})
您只能使用 CSS 和 HTML 来完成此操作。您遇到的问题是在您的导航栏内添加一行和 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;
}
我正在尝试让 bootstrap 导航丸在移动设备视图中占用更少 space,默认情况下它们会堆叠在一起。这样使用快很多space。我想要达到的目标是每行服用两颗药丸。 到目前为止,除了活动 class 之外,我已经完成了所有工作。当我单击一个药丸时,它会变为活性药丸,但不会将活性药丸 class 与之前的活性药丸分开。
我使用的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 方面的专家,您可能会说,所以我需要帮助来弄清楚这是否可行。
谢谢
抢
应该这样做!
$(function(){
$('li[role="presentation"]').on('click', function(e){
$('ul[role="tablist"] li').removeClass('active');
$(this).addClass('active');
})
})
您只能使用 CSS 和 HTML 来完成此操作。您遇到的问题是在您的导航栏内添加一行和 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;
}