Bootstrap radiobutton在同一行

Question

如何在不叠加课程的情况下使radio-inline组radiobuttons在同一行中对齐？

http://codepen.io/pablocgdev/pen/RKroZq

Answer 1

我可以通过添加以下css代码将radiobuttons放在示例中的同一行：

.funkyradio-success {
  display: inline-block;
}

由于您的无线电按钮位于div内，因此您需要确保它们没有display:block（它们的默认值），以便它们可以在同一行中呈现。

Answer 2

<div class="funkyradio">
          <label class="radio-inline"> <p>Output</p>

            <div style='display:inline;' class="funkyradio-success">
                <input type="radio" name="radio" id="radio6" />
                <label for="radio6">P123F</label>
            </div>
            <div  style='display:inline;' class="funkyradio-success">
                <input type="radio" name="radio" id="radio7" />
                <label for="radio7">ASDF</label>
                </label>

    </div>

如果您将样式display: inline添加到div标签中，就像我一样，这样可以获得所需的结果。我使用了内联css，但你可能想将它添加到你的css文件中。 display: inline将仅使用保存元素所需的空间量。