按钮垂直组，在 bootstrap 4 底部对齐

Question

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

<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

Answer 1

两种方式：
1.

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

2.

<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>

问候

Answer 2

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

参见下面的代码片段。

.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>

按钮垂直组，在 bootstrap 4 底部对齐

Buttons vertical group, in bootstrap 4 align to bottom

css

button

bootstrap-4

ng-bootstrap

angular