如何垂直对齐输入按钮.引导程序3

Question

以下是我用来尝试垂直渲染一组按钮元素的代码。

<div class="btn-group" data-toggle="buttons" style="width: 80%;background-color: grey;">
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option1"> Option 1
</label>
</div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option2"> Option 2
</label>
</div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
</div>

问题是按钮是并排呈现的。我正在使用引导程序3。

我设法使它们垂直渲染的唯一方法是包含无线电样式，我想避免这种情况。我想使用输入字段，这样我就可以动态地设置/重置检查的值。我将使用dom选择器来更改无线电组元素的状态。

有人能为如何做到这一点提供一些想法吗？

Answer 1

根据https://getbootstrap.com/docs/3.3/components/#btn-您应该更改的第一行

<div class="btn-group" ...

至

<div class="btn-group-vertical" ...

Answer 2

将按钮放在div块中，它们将垂直对齐

<div class="btn-group" data-toggle="buttons" style="width: 80%;background-color: grey;">
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option1"> Option 2
</label>
</div>
</div>
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option2"> Option 2
</label>
</div>
</div>
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
</div>
</div>