如何垂直對齊輸入按鈕。 引導程序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>

問題是按鈕是並排呈現的。 我正在使用 bootstrap3。

我設法讓它們垂直渲染的唯一方法是包括收音機 styles，這是我想避免的。 而且我想使用輸入字段，以便我可以動態設置/重置檢查值。 我將使用 dom-selectors 來更改無線電組元素的 state。

誰能提供一些關於如何做到這一點的想法？

Answer 1

根據https://getbootstrap.com/docs/3.3/components/#btn-groups上的文檔，您應該將第一行從

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