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

Question

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

代码只是从引导程序复制粘贴（我还包括父 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>

运行 HTML 它看起来像这样

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

标签： htmlcsstwitter-bootstrapradio-button

Answer 1

将输入包含在标签中而不分离标签，并在下面提到的代码中输入 li

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

示例图像