<legend>引導中的標籤和網格系統造型問題4

Question

[應該以這種方式顯示。相反] ... 1 [它以這種方式顯示。看到水果字是不對齊] 2

我使用Bootstrap 4 alpha v6。下面的代碼

<fieldset class="form-group row"> 
    <div class="col-sm-3"><legend class="col-form-legend">Fruit</legend></div> 
    <div class="offset-sm-3 col-sm-9"> 
     <div class="form-check row"> 
      <label class="form-check-label"> 
       <input class="form-check-input" type="radio" name="legendradio" id="legendradio1" value="1">Apple 
      </label> 
     </div> 
     <div class="form-check row"> 
      <label class="form-check-label"> 
       <input class="form-check-input" type="radio" name="legendradio" id="legendradio2" value="2">Orange 
      </label>  
     </div> 
     <div class="form-check row"> 
      <label class="form-check-label"> 
       <input type="radio" class="form-check-input" name="legendradio" id="legendradio3" value="1">Watermelon 
      </label> 
     </div> 
    </div> 
</fieldset> 

Answer 1

通過添加一個類來進行填充以下HTML元素：

<div class="col-sm-3 padding"><legend class="col-form-legend">Fruit</legend></div> 

和

<fieldset class="form-group row padding"> 

CSS：.padding {填充：NPX}