bootstrap-4 - 整行的垂直内容对齐(Vertical content alignment across the whole row)

Question

I have the following code:

(我有以下代码：)

<div class="card text-white bg-primary">
    <div class="card-body pb-0">
      <div class="container h-100">
        <div class="row">
          <div class="col-md-8">
              <h5 class="card-title">Some Title</h5>
          </div>
          <div class="col-md-4">
            <button class="btn btn-primary">Add</button>
            <button class="btn btn-primary">Edit</button>
          </div>
        </div>
      </div>
    </div>

That would look like this:

(看起来像这样：)

What I need is to vertically adjust bottoms of texts across the whole row.

(我需要的是垂直调整整行文字的底部。)

Preferably using first column as an anchor.

(最好使用第一列作为锚点。)

Any idea how to do that?

(任何想法如何做到这一点？)

Thanks

(谢谢)

  ask by Mark translate from so

Answer 1

You should zero out the margin bottom on the h5 ( mb-0 ), and then use align-items-center on the row ..

(您应该将h5（ mb-0 ）的边距底部mb-0 ，然后在.. row上使用align-items-center 。)

  <div class="card text-white bg-primary">
    <div class="card-body py-2">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h5 class="card-title mb-0">Some Title</h5>
                </div>
                <div class="col-md-4">
                    <button class="btn btn-primary">Add</button>
                    <button class="btn btn-primary">Edit</button>
                </div>
            </div>
        </div>
   </div>

Demo

(演示版)