在引导中排列标签与单选按钮 [英] Lining up labels with radio buttons in bootstrap

问题描述

我有一个Bootstrap窗体，其中有一些内联单选按钮和一个标签。我想把标签保持在按钮的同一行，但我似乎不能做到这一点。这是我的方法：

I have a Bootstrap form with some inline radio buttons and a label. I'd like to keep the label on the same line as the buttons, but I can't seem to make that happen. Here's my approach:

<form>
    <div class="control-group">
        <label class="control-label">Some label</label>
        <div class="controls">
            <label class="radio inline">
                <input type="radio" value="1"/>
                First
            </label>
            <label class="radio inline">
                <input type="radio" value="2"/>
                Second
            </label>
        </div>
    </div>
</form>

小提琴： http://jsfiddle.net/GaDbZ/2/

我也尝试过：

<form>
    <div class="form-inline">
        <label class="control-label">Some label</label>
        <label class="radio">
            <input type="radio" value="1"/>
            First
        </label>
        <label class="radio">
            <input type="radio" value="2"/>
            Second
         </label>
    </div>
</form>

但是一切都被抹掉了。小提琴： http://jsfiddle.net/GaDbZ/3/

But everything is smooshed together. Fiddle: http://jsfiddle.net/GaDbZ/3/

如何获得第一个的水平间距和第二个的垂直间距？

How can I get the horizontal spacing from the first one combined with the vertical spacing of the second?

此外，我应该注意到，在现实生活中，我有一个一堆其他的东西在形式，所以我不想使用 form-horizo​​ntal ，因为它创造了不与其他东西jive 。

Also, I should note that in real life, I have a bunch of other stuff going on in the form, so I don't want to use form-horizontal because it creates funky margins that don't jive with the other stuff I have in there.

推荐答案

如果在user1938475提供的解决方案中将radio inline类添加到控件标签，正确地与其他标签。或者，如果你只使用'radio'像你的第二个例子只是包括'radio'类。

If you add the 'radio inline' class to the control label in the solution provided by user1938475 it should line up correctly with the other labels. Or if you're only using 'radio' like your 2nd example just include the 'radio' class.

<label class="radio control-label">Some label</label>

或无线电内联

<label class="radio inline control-label">Some label</label>

这篇关于在引导中排列标签与单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！