对齐多行切换单选按钮组4

Question

我试图划分4个单选按钮为使用引导4 alpha6两条线，但我不能：

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

而且我无法对齐它们以适合全宽度，因为我希望每行有两个单选按钮，并且每行都有全宽，每个单选按钮的宽度为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>

希望这有助于！