Bootstrap 单选按钮组在选项卡面板中不可选择

Bootstrap Radio Group not selectable within a Tab Panel

提问人:Patrick McDonald 提问时间:3/14/2019 最后编辑:Patrick McDonald 更新时间:3/21/2019 访问量:280

问:

我的选项卡上有一个单选按钮组,但是单选选项不可选择

  <!-- 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

Bootstrap-4 单选按钮组 选项卡面板

评论


答:

0赞 Patrick McDonald 3/14/2019 #1

更新

对此的解决方案是从元素中删除属性data-toggle="tab"tab-pane

原始答案

我在 GitHub 上为此创建了一个问题,它已被确认为错误。

https://github.com/twbs/bootstrap/issues/28478