Bootstrap 复选框在导航药丸中不起作用 [英] Bootstrap Checkbox not working in nav-pills
问题描述
我不明白为什么第二个复选框不起作用.我确定它与 Bootstrap/CSS 相关,这不是我的强项.
第一个复选框按预期工作,但是当我将复选框放入导航药丸时会发生一些事情.有人可以帮我吗?
HTML:
<标签><input type="checkbox">Testcheckbox标签><ul id="menu" class="nav nav-pills nav-stacked"><li class="nav-divider"></li><li><a class="nav-menu-container" data-toggle="collapse" data-parent="#menu" href="#sub-menu">子菜单<div class="sub-menu-caret-container"><span class="caret arrow"></span></div></a><ul class="nav nav-pills nav-stacked collapse in" id="sub-menu"><li data-toggle="collapse" data-parent="#sub-menu" href="#pv11"><div class="nav-sub-menu-container"><div class="checkbox"><标签><input type="checkbox">Testcheckbox标签>
<li data-toggle="collapse" data-parent="#sub-menu" href="#pv11"><a id="item1" class="nav-sub-menu-container" href="#">项目 2</a></li><li data-toggle="collapse" data-parent="#sub-menu" href="#pv11"><a id="item2" class="nav-sub-menu-container" href="#">项目 3</a></li><li data-toggle="collapse" data-parent="#sub-menu" href="#item3"><a class="nav-sub-menu-container" href="#">Item4<li class="nav-divider"></li>
CSS:
.sub-menu-caret-container {浮动:对;}.nav-menu-container {字体粗细:粗体;}ul.nav-stacked ul.nav-stacked >立>.nav-子菜单容器{padding-left: 30px;}
父 li
上的 data-toggle
会覆盖复选框点击.
I can't figure out why the second checkbox is not working. I'm sure it's something relating to Bootstrap / CSS, and this is not my forte.
The first checkbox works as expected, but something happens when I put the checkbox inside the nav-pills. Can someone help me out?
HTML:
<div class="checkbox">
<label>
<input type="checkbox">Testcheckbox
</label>
</div>
<ul id="menu" class="nav nav-pills nav-stacked">
<li class="nav-divider"></li>
<li>
<a class="nav-menu-container" data-toggle="collapse" data-parent="#menu" href="#sub-menu">
Sub-Menu
<div class="sub-menu-caret-container"><span class="caret arrow"></span></div>
</a>
</li>
<ul class="nav nav-pills nav-stacked collapse in" id="sub-menu">
<li data-toggle="collapse" data-parent="#sub-menu" href="#pv11">
<div class="nav-sub-menu-container">
<div class="checkbox">
<label>
<input type="checkbox">Testcheckbox
</label>
</div>
</div>
</li>
<li data-toggle="collapse" data-parent="#sub-menu" href="#pv11"><a id="item1" class="nav-sub-menu-container" href="#">Item 2</a></li>
<li data-toggle="collapse" data-parent="#sub-menu" href="#pv11"><a id="item2" class="nav-sub-menu-container" href="#">Item 3</a></li>
<li data-toggle="collapse" data-parent="#sub-menu" href="#item3"><a class="nav-sub-menu-container" href="#">Item 4</a></li>
</ul>
<li class="nav-divider"></li>
</ul>
CSS:
.sub-menu-caret-container {
float: right;
}
.nav-menu-container {
font-weight: bold;
}
ul.nav-stacked ul.nav-stacked > li > .nav-sub-menu-container {
padding-left: 30px;
}
The data-toggle
on the parent li
is overriding the checkbox click.
这篇关于Bootstrap 复选框在导航药丸中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!