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）

1 个答案: