Bootstrap无线电组 - 水平对齐

Question

我有一个内联无线电组的Bootstrap标记：

<div class="container">
    <section id="content">

        <form class="form-horizontal" role="form" name="myForm">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>

                <div class="panel-body">

                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-3">
                            <label for="myField" class="control-label">Radio title:</label>

                            <label class="radio-inline">
                                <input type="radio" name="myField" value="normal" /> RADIO1
                            </label>

                            <label class="radio-inline">
                                <input type="radio" name="myField" value="high" /> RADIO2
                            </label>
                        </div>
                    </div>

                </div>
            </div>
        </form>

    </section>
</div>

看起来像这样：

如何使标题和收音机输入水平对齐？

请参阅此JSFiddle：http://jsfiddle.net/dennismadsen/u6qus4ud/1/。

Answer 1

在标签中添加vertical-align:middle;或vertical-align:top;。

label {
vertical-align: middle;
}

检查Fiddle。

Answer 2

要实现此目的，您需要使用vertical-align属性。

Answer 3

将.form-group .radio-inline { vertical-align: top; }应用于他们

Answer 4

在标签标签中，将无线电内联类更改为无线电类。

<label class="radio">
<input type="radio" name="myField" value="normal" /> RADIO1
 </label>
<label class="radio">
`enter code here`<input type="radio" name="myField" value="high" /> RADIO2
                            </label>