按钮垂直组，在引导程序 4 中与底部对齐答案

【问题标题】：Buttons vertical group, in bootstrap 4 align to bottom按钮垂直组，在引导程序 4 中与底部对齐
【发布时间】：2019-12-15 06:34:23
【问题描述】：

我想将按钮组与按钮对齐。应该水平居中，垂直分组，但与底部对齐。现在，我有这种情况：

<div class="row">
    <div class="col-md-4">
        <div class="center-block">
            <div class="btn-group-vertical">
                <p>
                    <button class="btn btn-info btn-sm btn-block">
                        Button 1a
                    </button>
                </p>
                <p>
                    <button class="btn btn-info btn-sm btn-block">
                        Button 2a
                    </button>
                </p>
            </div>
        </div>
    </div>

css 在哪里：

.center-block {
  display: block;
  text-align: center;
}

row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

现在，我有第一张图片的情况。我想为第二个创建 css

【问题讨论】：

问题不清楚。能否请您改写句子。
添加了描述问题的图片。
@Pavan - 这是完美的！有没有可能改变按钮的大小？现在我已经很小了。当改变大小时，它不是中心。
尝试在按钮上使用引导程序 btn-sm、btn-xs 和 btn-lg 类。如果您仍然不相信大小，您可以选择这些类中的任何一个并根据需要设置font-size 属性。
@Pavan 当我在 boostrap 卡类中使用该解决方案时。在卡体部分。没有工作。一排在第二排里面。

标签： css angular button bootstrap-4 ng-bootstrap

【解决方案1】：

两种方式：
1.

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

问候

【讨论】：

【解决方案2】：

您必须将行的位置设置为relative，并使center-block 与bottom 对齐，保持其位置absolute

见下面的代码 sn-p。

.center-block {
  display: block;
  text-align: center;
  position: absolute;
  bottom: 0;
}

row {
  display: flex;
  flex-direction: row;
  justify-content: space - around;
  position: relative;
}

<div class="row">
  <div class="col-md-4">
    <div class="center-block">
      <div class="btn-group-vertical">
        <p>
          <button class="btn btn-info btn-sm btn-block">
                        Button 1a
          </button>
        </p>
        <p>
          <button class="btn btn-info btn-sm btn-block">
                        Button 2a
          </button>
        </p>
      </div>
    </div>
  </div>

【讨论】：