Question

我在选项卡上有一个单选组，但是单选选项无法选择

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

Answer 1

更新

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

原始答案

我在GitHub上为此创建了一个问题，并已将其确认为错误。

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

在选项卡面板中无法选择Bootstrap无线电组

1 个答案: