干扰bootstrap4按钮水平对齐是因为在上部添加额外的文本？

Question

我在引导中创建了网格系统布局，以展示我的3门课程，因为我在中间课程标题的顶部显示了课程图像，在底部课程注册按钮中，每当我要为特定文本插入多行标题时，“所有课程”按钮将不处于相同的水平高度，这意味着它们的对齐会受到干扰。

您可以参考http://demo.proserindustries.com/中的“高亮显示课程”一节。

Answer 1

将这2个属性添加到CSS中，使所有按钮对齐。

.mb-5 .btn-secondary { bottom: -12%; position: absolute; left: -webkit-calc(50% - 52.5px); left: -moz-calc(50% - 52.5px); left: calc(50% - 52.5px); }
.mb-5, .my-5 { margin-bottom: 7rem!important; }

解释

1. 按钮的宽度为105 so，这就是为什么我们必须移动它52.5px，使按钮变得居中。
2. 您可能希望按照您的确切要求来使用margin-bottom --最佳实践是要求您的内容团队在一定数量的字符内设置标题。