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行第一个单选按钮左侧10px.当屏幕缩小并且所有单选按钮都堆叠时,这是非常明显的.同样,第1行位于左侧,但其下方的每一行都向右推10px.

我试过的

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

Answer 1

我认为这将是:

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

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

http://jsfiddle.net/rm7n73ep/

Answer 2

最好的选择是使用网格系统。

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

这样，每次添加 1 时，它都会达到最大值 12，然后浮动到下一行。因此，如果它按照您所说的那样换行，那么您可以将数字更改为稍大的尺寸。