html - 如何仅在调整大小时使 Bootstrap 按钮全宽

Question

我在页面顶部的超大屏幕下方有一组 4 个内嵌按钮。

2 个是下拉菜单，其他只是常规按钮。

当我调整浏览器窗口大小时，我想让它们变为垂直堆叠、全宽。我知道添加类 btn-block 会使它们全宽，但我只希望在窗口大小小于 768px 时发生这种情况。

这是我当前的代码。非常感谢!

<div class="row">
<div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></button>
    <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            </ul>
    </li>
</div>      
<div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Archives <b class="caret"></b></button>
    <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            </ul>
    </li>
</div>      
<button class="btn btn-primary"><a href="#"><i class="fa fa-question-circle fa-fw"></i> Info</a>   </button>
    <button class="btn btn-primary"><a href="#"><i class="fa fa-envelope fa-fw"></i> Sign Up</a></button>
    </div>

Answer 1

您可以使用媒体查询来应用 768 像素或更小的全宽按钮。

@media (max-width: 768px) {
    .btn,.btn-group {
        width:100%;
    }
}

演示:http://bootply.com/98570