Html 引导3：在第一个按钮包装后垂直堆叠按钮？

我正在构建一个登录页面，其中包含使用字体图标的社交按钮。在较大的设备上，按钮水平地彼此相邻显示，但当我调整屏幕大小时，当其他两个按钮对于列来说太宽时，最右边的按钮将缠绕在它们下面。我希望按钮垂直堆叠并扩展以填充列的空间，而不是在下面有一个放错位置的按钮。我曾经尝试过一种使用媒体查询的方法，但它有点粗糙，而且我担心它不容易维护，所以我放弃了这个想法

以下是我目前掌握的情况：

登录
Facebook登录
谷歌登录

不确定这是否有用。但是试试这个

<div class="container">
    <div class="row text-center">
         <div class="col-md-6">
          <button id="login" class="btn btn-default">Login</button>
          <button id="facebook" class="btn btn-primary"><span class="fa fa-facebook fa-lg"></span>  Facebook Login</button>
          <button id="google" class="btn btn-danger"><span class="fa fa-google fa-lg"></span>  Google Login</button>
        </div>   
    </div>
</div>

登录
Facebook登录
谷歌登录

您有两个选择。在我看来，媒体查询是最干净的，但有以下几种选择：

1） 添加一个媒体查询并针对一个特殊类，您可以将其添加到这些按钮中：

@媒体屏幕和（最大宽度：768px）{
.loginBtns{
宽度：100%；
显示：块；
利润率：10px0；
}
}

登录
Facebook登录
谷歌登录

太棒了，解决方案1可以根据需要工作！我曾经有过两种观点的结合，但这有点古怪，如果我以后再谈的话，可能会让人头疼。再次感谢