引导按钮组移动格式化重置

我正在使用引导按钮组进行格式设置，以在我的桌面上显示我的网页以显示复选框和单选按钮组。但是，当按钮组显示在移动设备上时，看起来不正确。我想知道是否有一种简单的方法来删除这些格式来显示标准复选框和单选按钮。感谢您的帮助。引导按钮组移动格式化重置

<div class="container"> 

<div class="col-md-6"> 
<div class="btn-group" data-toggle="buttons"> 
    <label id="label1" class="btn btn-default"> 
     <input type="checkbox" name="popcorn" value="popcorn">Popcorn</input> 
    </label> 
    <label id="label2" class="btn btn-default"> 
     <input type="checkbox" name="pictures" value="pictures">Pictures</input> 
    </label> 
    <label id="label3" class="btn btn-default"> 
     <input type="checkbox" name="events" value="events">Events</input> 
    </label> 
</div> </div></div></div>

更新：我想我要补充一点，它包裹在列。显示在线建议没有效果

来源

2017-04-12 Pete

什么问题呢？移动设备上显示的代码或图像。 –

按钮组进入下一行 - 它不会全部保持分组在一起 – Pete

add css'display：inline' –

这样的事情？

https://jsfiddle.net/dalinhuang/31gz6dh4/4/

.btn { 
    float: none; 
    display: inline-block; 
    overflow: hidden; 
} 

.btn-group { 
    display: flex; 
}

，或者你想溢出：

https://jsfiddle.net/dalinhuang/31gz6dh4/2/

或中心：

https://jsfiddle.net/dalinhuang/31gz6dh4/3/

来源

2017-04-12 16:19:59

显示：flex是我正在查找的部分，但是，在桌面查看时，它将删除中心属性我也申请了。无论如何只适用于小尺寸和xs尺寸 – Pete

@你想要这样的东西吗？ https://jsfiddle.net/dalinhuang/31gz6dh4/3/ –

就是这样。你摇滚。谢谢 – Pete

引导按钮组移动格式化重置

回答

相关问题