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

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/