将多个内联单选按钮组与标签垂直对齐 (Bootstrap 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>

将多个内联单选按钮组与标签垂直对齐 (Bootstrap 3)

Align multiple inline radio button groups with labels vertically (Bootstrap 3)

html

css

label

radio-group

twitter-bootstrap