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>

这样每次添加一个，它将最多为12，然后将其浮动到下一行。所以，如果它像你说的那样包裹，那么你可以将数字改为稍大的尺寸。

Answer 3

解决方案1 

使用JS循环遍历组中的每个单选按钮，每个单选按钮getBoundingClientRect()，第一个单元格与前一个单元格不同bottom，删除其左边距。我的问题是它必须在屏幕调整大小上完成。我不是粉丝。

解决方案2

快速简单，使用我自己的CSS类（不是黑客Bootstrap）将margin-left: 10px添加到第一个无线电内联按钮。在下侧，这会为您的单选按钮组添加缩进。好处是，这是一个快速简单的修复，没有黑客攻击，使用CSS而不是JS，并且缩进实际上看起来不错。

解决方案2 - Sidenote

如果你不介意黑客入侵Bootstrap，请把它放在你在Bootstrap之后添加的CSS文件中。

@media (max-width: 768px)
{
    .radio-inline
    {
        display: block;
    }
}

这使得单选按钮在较小的屏幕上立即堆叠而不是彼此浮动。我注意到在某些情况下，在较小的屏幕上，前四个单选按钮被堆叠，但是两个文本较少的按钮被放置在同一条线上。

Answer 4

我遇到了类似的问题。

试试这个：

<label class="radio-inline" ***style="margin-left: 0px;"***>
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    Radio button's label 1 </label>

<label class="radio-inline" ***style="margin-left: 0px;"***>
    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    Radio button's label 2 </label>

...

你应该没事！

Answer 5

BIG Inline Bootstrap 3单选按钮

CSS

.radioButtonBig {
 transform: scale(1.7); 
}

HTML（使用Bootstrap 3）

               <div class="form-group">
                    <div class="form-group">
                        <label for="">3. Question three is all about inserting radio buttons:</label>
                        <p class="radio-inline"></p>
                        <label class="radio-inline">
                            <input class="radioButtonBig" type="radio" name="rbg6" value="yes" onclick="rbShowSection(this, 'q3text');">
                            &nbsp;Yes
                        </label>
                        <p class="radio-inline"></p>
                        <label class="radio-inline">
                            <input class="radioButtonBig" type="radio" name="rbg6" value="no" onclick="rbShowSection(this, 'q3text');">
                            &nbsp;No
                        </label>
                    </div>
                </div>

注意：空白的p标签只是在它们之间创建空间 - 但是超级必要。有点手册，但需要。

Bootstrap无线电内联线路包装和堆叠单选按钮

5 个答案: