将多个内联单选按钮组与标签垂直对齐（引导 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 作为单选按钮，这就是为什么标记有点不同以及 radio-* 类的用途。

这里的目标是让它们都垂直和水平排列。横向不是问题，效果很好。但是，不同长度的标签会导致单选按钮组移动，变得不均匀，如图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>