提问者:小点点

如何垂直对齐输入按钮。 引导3


下面是我用来尝试垂直呈现一组按钮元素的代码。


<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选择器来改变无线电组元素的状态。

有人能提供一些关于如何做到这一点的想法吗?


共2个答案

匿名用户

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