引导单选按钮组未正确显示

Question

我不知道为什么，但单选按钮组单独显示按钮/标签和单选按钮，与引导网站上的示例不同

代码只是从 bootstrap 复制粘贴（我还包括了父 div）

<div class="col-5 d-flex align-items-end justify-content-end">
    <div class="btn-group-vertical" role="group" aria-label="Basic radio toggle button group">
        <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
        <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
        <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
    </div>
</div>

我怎样才能使它看起来像 bootsrap 示例中的那个

Answer 1

将输入包含在标签中，而不将标签和输入分开，如下面提到的代码

<div class="col-5 d-flex align-items-end justify-content-end">
   <div class="btn-group-vertical" role="group" aria-label="Basic radio toggle button group">

     <label><input type="checkbox" value="">Option 1</label>

   </div>
 </div>

示例图像

Answer 2

我遇到了这个问题，请确保您使用的是最新版本的 bootstrap，这为我解决了这个问题！

Answer 3

将 btn-group 类添加到包装 div 中，如下所示

<div class="col-5 d-flex align-items-end justify-content-end">
<div class="btn-group-vertical btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
</div>