如何仅在调整大小时使引导按钮全宽

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