Question

我有一组单选按钮和一个提交按钮。我希望将它们并排放置，左侧是单选按钮组，并且提交按钮按比例对齐在右侧。使用twitter bootstrap执行此操作的正确方法是什么？

目前，无论我做什么，我都会收到单选按钮组下面的按钮。

Answer 1

假设您的单选按钮和提交按钮包含在带有正确引导标记的表单标记中，则引导程序基本上提供了两种不同的表单布局。

形式水平
形内联

此行为的理想表单布局为form-inline。您所要做的就是将表单css类从默认值更改为form-inline并覆盖.form-inline .radio类的display属性。

示例HTML

<form class="form-inline">
    <div class="form-group">
        <div class="radio">
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                Option one is this and that&mdash;be sure to include why it's great
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Option two can be something else and selecting it will deselect option one
            </label>
        </div>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

CSS

.form-inline .radio {
    display: block;
}

这是一个有效的example

Answer 2

当您使用form-horizontal时，可以使用radio-inline作为单选按钮..

<form class="form-horizontal">
      <div class="form-group">
        <label class="radio-inline">
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
          Radio 1
        </label>
        <label class="radio-inline">
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
          Radio 2
        </label>

        <label> </label>
        <button type="submit" class="btn btn-default">Submit</button>
    </div>

http://bootply.com/YEfKIS6Lqa

如何强制提交按钮出现在一组单选按钮的右侧（使用twitter bootstrap）？

2 个答案: