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”类，我得到：

我无法将它们对齐以适应全宽，因为我想要每行两个单选按钮，每行的全宽度为每个单选按钮50％。

我试图给每个人“col-6”，这就是我得到的：

有什么建议吗？

Answer 1

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

试试这个

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

希望这有帮助！

在引导程序4中对齐多行切换单选按钮组

1 个答案: