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

时间:2017-04-02 08:00:10

标签: radio-button alignment twitter-bootstrap-4

我试图使用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>

这是我得到的:

toggle image problem

我试图删除“btn-group”类,我得到:

toggle problem 2

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

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

toggle problem 3

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

实际上我们只需要使用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>

希望这有帮助!