Twitter bootstrap 按钮不'；t在引导程序4中的断点处垂直堆叠

我尝试水平显示一系列div，除非屏幕大小低于sm，然后垂直堆叠。这看起来应该很简单…我让它与引导3一起工作，但由于某种原因，当我升级到引导4时，它停止了工作。我尝试将断点更改为col-md-10、col-md-3等，以允许新的Bootstrap 4屏幕大小，但即使在xs屏幕上也无法工作。我错过了什么

        <div class="container">
        <div class="row">
            <div class="col-sm-10 offset-xs-4 offset-md-2 btn-group">
                <div class="col-sm-3 col-xs-6 button button-header button-tools-collections"><a href="<?php echo site_url('products/tools/'); ?>"><h3>Tools</h3>  <span class="badge"><span class="fa fa-wrench fa-2x"></span></span></a></div>
                <div class="col-sm-3 col-xs-6 button button-header button-tools-collections"><a href="<?php echo site_url('products/collections/'); ?>"><h3>Collections</h3>  <span class="badge"><span class="fa fa-folder-open fa-2x"></span></span></a></div>
                <div class="col-sm-3 col-xs-6 button button-header button-tools-collections"><a href="<?php echo site_url('cooperative/regional_projects/'); ?>"><h3>Regional Projects</h3>  <span class="badge"><span class="fa fa-globe fa-2x"></span></span></a></div>
            </div>
        </div>  
        </div>

请参阅

改进了网格层，增加了第五个选项（寻址较小的设备 在576px及以下）并从这些类中删除

-xs

中缀。 示例：

.col-6.col-sm-4.col-md-3

最小断点现在是

col-*

而不是

col xs-*

，因此在上面的代码中，4.x中使用的最小断点是

col-sm-3

修改代码以支持Bootstrap 4.x类它可能看起来像：

---

主要区别实际上来自以下事实：bootstrap 4中的类

btn组

是

display:inline flex显示时
显示：内联块在BS3中。因此，设置
d-inline-block
以获得与BS3相同的方式

.button-header {
    border: 3px solid #b8d87a;
    display: inline-block;
    font-size: .8em;
    margin: 2em 1em 2em 0;
}
.button-header a {
    color: #fff;
    padding: .5em 1em;
    display: block;
}

.button-header a:hover {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.3);
}

.button-tools-collections a {
    color: black;
    text-align: center;
}