垂直排列的单选按钮留下间隙(引导 4)

Question

我需要样式为类似按钮的收音机。但是按钮应该像这样垂直排列。我尝试使用".btn-group-vertical"，但这会在带有"标签的按钮之间留下间隙。它打算如何与引导程序一起使用？我可以在没有额外 CSS 的情况下实现此布局吗？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group btn-group-toggle" role="radiogroup" data-toggle="buttons">
<div class="btn-group-vertical">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
</div>

Answer 1

你非常接近。您需要将收音机包装在<div class="btn-group-toggle btn-group-vertical" role="radiogroup" data-toggle="buttons">中，它可以工作。

/*DEMO*/body{padding-top:3rem;padding-left:3rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group-toggle btn-group-vertical" role="radiogroup" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>