Bootstrap 按钮组移动格式化重置

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>

更新： 我想我应该补充一点，它被包裹在列中。 display-inline 建议无效

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/