在小屏幕上删除bootstrap .btn-group

Question

我使用HTML标记下方生成按钮列表，并使用.btn-group将按钮组合在一起。

<div class="btn-group mt-30">
    <a class="btn btn-border-d btn-circle" href="#">
        exmaple 1
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 2
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 3
    </a>
</div>

生成视图，如

但是在移动设备等小型设备上查看页面时，视图呈现为

在小型设备上，我想删除.btn-group类，因为在小型设备上，我想在新行中呈现每个按钮，如

从.btn-group移除div呈现视图，如第3张图片所示。

如何仅在大型设备上应用.btn-group，即使用md或lg并在sm，xs上进行广播？

Answer 1

您应该在小型设备上覆盖.btn-group .btn：

@media (max-width: 760px) {
    .btn-group .btn.btn-circle {
        border-radius: 10px;
        display: block;
        float: none;
    }
}

Answer 2

@ Justinas＆＃39;对于这种情况，答案可能更好，但如果你想为不同大小的显示实际拥有不同的标记，你可以使用Bootstrap的Responsive Utilities。

<div class="btn-group mt-30 hidden-sm hidden-xs">
    <a class="btn btn-border-d btn-circle" href="#">
        exmaple 1
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 2
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 3
    </a>
</div>

在小型设备上：

<div class="visible-sm-block visible-xs-block">
    <a class="btn btn-border-d btn-circle" href="#">
        exmaple 1
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 2
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 3
    </a>
</div>