在 bootstrap 4 中对齐 multi-line 切换单选按钮组

Question

我正在尝试使用 bootstrap 4 alpha6 将 4 个单选按钮分成两行，但我不能：

<div id="payment-table" class="row">
    <div class="col-12">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
                <img src="imgs/cash.png">
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
                <img src="imgs/visa.png">
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
                <img src="imgs/split.png" id="split">
            </label>
            <label class="btn btn-primary">
                 <input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
                 <img src="imgs/master.png">
            </label>
        </div>
    </div>
</div>

这是我得到的：

我试图删除 "btn-group" class，我得到：

而且我无法将它们对齐以适应全宽，因为我希望每行有两个单选按钮，并且每行都有全宽，每个单选按钮占 50%。

我试着给每一个 "col-6"，这是我得到的：

有什么建议吗？

Answer 1

实际上我们只需要使用 col class。通过嵌套，我们确定会有多少列。

试试这个

.btn-primary {
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="payment-table" class="row">
  <div class="col">
    <div class="" data-toggle="buttons">
      <div class="row">

        <div class="col">
          <label class="btn btn-primary active col">
                <input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
                <img src="imgs/cash.png">
            </label>
        </div>
        <div class="col">
          <label class="btn btn-primary col">
                <input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
                <img src="imgs/visa.png">
            </label>
        </div>
      </div>
    </div>
    <div class="row">

      <div class="col">
        <label class="btn btn-primary col">
                <input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
                <img src="imgs/split.png" id="split">
            </label>
      </div>
      <div class="col">
        <label class="btn btn-primary col">
                 <input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
                 <img src="imgs/master.png">
            </label>
      </div>
    </div>
  </div>
</div>

希望对您有所帮助！

在 bootstrap 4 中对齐 multi-line 切换单选按钮组

Align multi-line toggling radio buttons group in bootstrap 4

alignment

radio-button

twitter-bootstrap-4