下面是我用来尝试垂直呈现一组按钮元素的代码。
<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>
问题是按钮是并排呈现的。 我正在使用bootstrap3。
唯一的方法,我已经设法让他们垂直渲染,是通过包括无线电风格,这是我想避免的。 我想使用输入字段,这样我可以动态地设置/重置检查过的值。 我将使用DOM选择器来改变无线电组元素的状态。
有人能提供一些关于如何做到这一点的想法吗?
根据https://getbootstrap.com/docs/3.3/components/#btn-groups上的文档,您应该从
至
将按钮放入它们将垂直对齐的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>