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

n3ipq98p 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(176)

我不知道为什么，但是单选按钮组将按钮/标签和单选按钮分开显示，这与bootstrap网站上的示例不同
代码只是从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>

running the HTML it looks like this
我怎么才能使它看起来像一个在bootrap的例子

twitter-bootstrap

来源：https://stackoverflow.com/questions/65465167/bootstrap-radio-button-group-not-displaying-properly

2条答案

按热度按时间

0lvr5msh1#

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

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

示例图像