twitter-bootstrap - Bootstrap 单选内联换行和堆叠单选按钮

Question

目标

我有一个动态数量的单选按钮。我希望它们显示为内联并在需要时下拉到下一行。根据屏幕大小，我希望它们堆叠。

当前问题

现在，我正在使用:

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    Radio button's label 1
</label>

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    Radio button's label 2
</label>

...

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadioX" value="optionX">
    Radio button's label X
</label>

正如我之前所说的，那些单选按钮是动态的，可以有任意数量。它们目前显示为内联。但是，当一排(即使在大型显示器上)容纳太多时，它们会下降并出现 margin-left: 10px与 .radio-inline 相关联.因此，第 2、3、4 等行中的第一个单选按钮位于第 1 行中第一个单选按钮的左侧 10 像素处。当屏幕缩小并且所有单选按钮都堆叠时，这一点非常明显。同样，第 1 行位于左侧，但其下方的每一行都被向右推 10px。

我试过的

我试着把它们放在 col-lg-# 中。就堆叠而言，这是可行的，但它会导致单选按钮标签上的自动换行。

Answer 1

我认为这将是:

.radio-inline+.radio-inline {
    margin-left: 0;
}

.radio-inline {
    margin-right: 10px;
}

http://jsfiddle.net/rm7n73ep/