对齐多个直列单选按钮组，垂直标签（引导3）

Question

我有以下HTML：

<div class="col-sm-6" style="border: 1px solid #ddd; border-radius: 15px;"> 
    <div style="margin: 8px 0 8px 5px;"> 
     <h3>Constitutional</h3> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <label class="radio-inline">Group 1.1:</label> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-wch-na" type="radio" name="ros-wch" value="na" checked /> 
        <label for="ros-wch-na">N/A</label> 
       </div> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-wch-y" type="radio" name="ros-wch" value="y" /> 
        <label for="ros-wch-y">Yes</label> 
       </div> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-wch-n" type="radio" name="ros-wch" value="n" /> 
        <label for="ros-wch-n">No</label> 
       </div> 
      </div> 
      <div class="col-sm-6"> 
       <label class="radio-inline">Group 1.2:</label> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-an-na" type="radio" name="ros-an" value="na" checked /> 
        <label for="ros-an-na">N/A</label> 
       </div> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-an-y" type="radio" name="ros-an" value="y" /> 
        <label for="ros-an-y">Yes</label> 
       </div> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-an-n" type="radio" name="ros-an" value="n" /> 
        <label for="ros-an-n">No</label> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <label class="radio-inline">Row2 Group1:</label> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-ns-na" type="radio" name="ros-ns" value="na" checked /> 
        <label for="ros-ns-na">N/A</label> 
       </div> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-ns-y" type="radio" name="ros-ns" value="y" /> 
        <label for="ros-ns-y">Yes</label> 
       </div> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-ns-n" type="radio" name="ros-ns" value="n" /> 
        <label for="ros-ns-n">No</label> 
       </div> 
      </div> 
      <div class="col-sm-6"> 
       <label class="radio-inline">Row2 Group2:</label> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-hc-na" type="radio" name="ros-hc" value="na" checked /> 
        <label for="ros-hc-na">N/A</label> 
       </div> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-hc-an" type="radio" name="ros-hc" value="y" /> 
        <label for="ros-hc-an">Yes</label> 
       </div> 
       <div class="radio radio-info radio-inline"> 
        <input id="ros-hc-an" type="radio" name="ros-hc" value="n" /> 
        <label for="ros-hc-n">No</label> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我使用awesome-bootstrap-checkbox单选按钮，所以这就是为什么标记是有点不同的，什么无线电课程是为了。

这里的目标是让它们全部垂直和水平排列。水平不是一个问题，这工作正常。但是，不同长度的标签会导致单选按钮组发生偏移，并且会变得不均匀，如here所示。期望的效果是让无线电组垂直对齐并且看起来均匀。

正确的CSS/HTML会是什么样的，以便组无论水平还是垂直对齐，无论标签如何？

Answer 1

将Label部分和Radio-boxes部分分为两部分。使用固定宽度的标签并包装长标签。

<div class="col-sm-6"> 
     <div class='labelsDiv'> 
      <label class="radio-inline">Group 1.2:</label> 
     </div> 
     <div class='radiosDiv'> 
      <div class="radio radio-info radio-inline"> 
       <input id="ros-an-na" type="radio" name="ros-an" value="na" checked /> 
       <label for="ros-an-na">N/A</label> 
      </div> 
      <div class="radio radio-info radio-inline"> 
       <input id="ros-an-y" type="radio" name="ros-an" value="y" /> 
       <label for="ros-an-y">Yes</label> 
      </div> 
      <div class="radio radio-info radio-inline"> 
       <input id="ros-an-n" type="radio" name="ros-an" value="n" /> 
       <label for="ros-an-n">No</label> 
      </div> 
     </div> 
</div>