Question

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

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

更新：我想我应该补充说它是用列包装的。显示内联建议无效

Answer 1

这样的事情？

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/

Bootstrap按钮组移动格式化重置

1 个答案: