提问人:Patrick McDonald 提问时间:3/14/2019 最后编辑:Patrick McDonald 更新时间:3/21/2019 访问量:280
Bootstrap 单选按钮组在选项卡面板中不可选择
Bootstrap Radio Group not selectable within a Tab Panel
问:
我的选项卡上有一个单选按钮组,但是单选选项不可选择
<!-- Tab list -->
<nav class="nav nav-pills" role="tablist">
<a id="tab1" class="nav-link active" href="#pane1" aria-controls="pane1" aria-expanded="false"
data-toggle="tab">
Custom Radio
</a>
<a id="tab2" class="nav-link" href="#pane2" aria-controls="pane2" aria-expanded="false" data-toggle="tab">
Standard Radio
</a>
</nav>
<!-- Tab content -->
<div class="tab-content">
<div aria-labelledby="tab1" class="tab-pane fade show active" data-toggle="tab" id="pane1" role="tabpanel">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="option1" name="navcustom" value="1" checked>
<label class="custom-control-label" for="option1">Option 1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="option2" name="navcustom" value="2">
<label class="custom-control-label" for="option2">Option 2</label>
</div>
</div>
<div aria-labelledby="tab2" class="tab-pane fade" data-toggle="tab" id="pane2" role="tabpanel">
<div class="form-check">
<input type="radio" class="form-check-input" id="option3" name="navstandard" value="3" checked>
<label class="form-check-label" for="option3">Option 3</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="option4" name="navstandard" value="4">
<label class="form-check-label" for="option4">Option 4</label>
</div>
</div>
当同一单选按钮组不在选项卡面板中时,不会发生此问题
<!-- Standalone -->
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="optionA" name="custom" value="A" checked>
<label class="custom-control-label" for="optionA">Option A</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="optionB" name="custom" value="B">
<label class="custom-control-label" for="optionB">Option B</label>
</div>
另请参阅此处的 jsfiddle
答:
0赞
Patrick McDonald
3/14/2019
#1
更新
对此的解决方案是从元素中删除属性data-toggle="tab"
tab-pane
原始答案
我在 GitHub 上为此创建了一个问题,它已被确认为错误。
评论