将 btn-block 按钮与引导程序对齐答案

【问题标题】：Align btn-block buttons with bootstrap将 btn-block 按钮与引导程序对齐
【发布时间】：2020-07-25 03:03:34
【问题描述】：

从昨天开始，我就遇到了一个我不理解的引导程序错误。我将 2 个按钮放在一个带有 flex 显示和一个 align-items-center 的 div 中，但第二个比第一个低，我无法进行调整来纠正它。

我的代码：

<div class="d-flex justify-content-center align-items-center mt-1">
     <a href="/product/{{ $product->id }}" class="btn btn-primary btn-block"><i class="fas fa-cart-arrow-down"></i></a>
     <a href="/product/{{ $product->id }}" class="btn btn-primary btn-block ml-1"><i class="fas fa-store"></i></a>
</div>

我的结果：

【问题讨论】：

您可以将mt-auto 与ml-1 一起使用，也可以同时用于两个按钮。 m-1 每个按钮也可以...

标签： html css bootstrap-4

【解决方案1】：

这是由于 .btn-block 类造成的。根据引导程序的文档： 通过添加 .btn-block 创建块级按钮（跨越父级的整个宽度）。

为了垂直分隔多个块按钮，引导程序中的 _buttons.scss 具有：

.btn-block+.btn-block {
    margin-top: .5rem;
}

因此，在您的代码中，margin top 将应用于第二个按钮的 btn-block 类。

<a href="/product/{{ $product->id }}" class="btn btn-primary btn-block ml-1"><i class="fas fa-store"></i></a>

您可以根据需要将以下样式添加到第二个按钮或修改类名。

margin-top: 0;

【讨论】：

【解决方案2】：

Bootstrap 的设计使得btn-block 的连续堆栈垂直，这不会因为 flex 容器而发生。不要在 flex 父级中使用 btn-block，而是使用 flex-grow-1...

 <div class="d-flex justify-content-center align-items-center mt-1">
        <a href="/product/{{ $product->id }}" class="btn btn-primary flex-grow-1"><i class="fas fa-cart-arrow-down"></i></a>
        <a href="/product/{{ $product->id }}" class="btn btn-primary flex-grow-1 ml-1"><i class="fas fa-store"></i></a>
 </div>

https://codeply.com/p/gtjiTMOt76

【讨论】：