twitter-bootstrap – Bootstrap无线电内联线路包装和堆叠单选按

发布时间：2020-12-17 21:35:13 所属栏目：安全来源：网络整理

导读：目标我有一个动态数量的单选按钮.我希望它们显示为内联,并在需要时下拉到下一行.根据屏幕尺寸,我希望它们堆叠. 当前的问题现在,我正在使用： label class="radio-inline" input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"

目标

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

当前的问题

现在,我正在使用：

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

我之前说的那些单选按钮是动态的,可以有任意数量.他们目前显示为内联.但是,如果有太多不适合一行(即使在大型显示器上),它们会下降并留下一个余量：10px与.radio-inline相关联.因此,第2,3,4行等中的第一个单选按钮位于第1行第一个单选按钮左侧10px.当屏幕缩小并且所有单选按钮都堆叠时,这是非常明显的.同样,第1行位于左侧,但其下方的每一行都向右推10px.

我试过的

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

解决方法

我认为这将是：

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

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

http://jsfiddle.net/rm7n73ep/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!