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

Posted 2023-03-05

【中文标题】Bootstrap 单选内联换行和堆叠单选按钮

【英文标题】：Bootstrap radio-inline line wrapping and stacked radio buttons

【发布时间】：2014-11-02 01:38:29

【问题描述】：

目标

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

当前问题

现在，我正在使用：

<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>

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

我的尝试

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

【参考方案1】：

我认为会是：

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


.radio-inline 
    margin-right: 10px;

http://jsfiddle.net/rm7n73ep/

【参考方案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，然后将其浮动到下一行。所以如果它像你说的那样换行，那么你可以将数字更改为稍大的尺寸。

【参考方案3】：

解决方案 1

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

解决方案 2

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

解决方案 2 - 旁注

如果您不介意稍微修改一下 Bootstrap，请将其放在您的 CSS 文件中，该文件是在 Bootstrap 之后添加的。

@media (max-width: 768px)

    .radio-inline
    
        display: block;
    

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

【参考方案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>

...

你应该没事！

【参考方案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 标签只会在 - 之间创建空格，但非常必要。 有点手动，但根据需要。