html - 如何在单独的 div 中水平对齐按钮

Question

我试图在 3 个单独的 div 中水平对齐 3 个按钮。但我就是无法让它工作。我正在使用 Bootstrap 和 Bootstrap 卡:

https://i.imgur.com/RtOpSFQ.png

知道如何用 css 存档吗？ 这是我的 html 结构:

<div class="row">
  <div class="col-sm-3 card-flex mx-auto">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Andrea<span><i class="fas fa-star stars first_star"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i></span></h4>
        <p class="card-text read-more-wrap">Mir geht es prima, bin immer statt! Das gab es noch nie bei mir und ich habe mich heut gewogen wieder eins weniger also nun 2,5 kg nach einer Woche.<br><span id="text"> Fantastisch step by
            step aber endlich funktioniert bei mir etwas, was jahrelang nicht funktioniert hat. Bin sehr zufrieden und fühl mich super. Auf geht´s in die 2. Phase</span></p>
        <button class="btn btn-secondary card-btn" id="toggle">Read More</button>
      </div>
    </div>
  </div>
  <div class="col-sm-3 card-flex mx-auto">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Daniel<span><i class="fas fa-star stars first_star"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i></span></h4>
        <p class="card-text read-more-wrap">Ich muss wirklich sagen das ich sehr skeptisch gegenüber dem Konzept gewesen bin. Wahrscheinlich weil ich schon so viel ausprobiert hatte. Jetzt, nach 8 Wochen habe ich 9,3 Kilo auf der Waage runter.
          <br><span id="text1"> Ich fühle mich einfach unfassbar gut, habe nicht das geringste Bedürfnis zu naschen oder zwischen den Mahlzeiten zu Essen. Das hatte ich wirklich noch NIE!</span></p>
        <button class="btn btn-secondary card-btn" id="toggle1">Read More</button>
      </div>
    </div>
  </div>
  <div class="col-sm-3 card-flex mx-auto">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Monika<span><i class="fas fa-star stars first_star"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i></span></h4>
        <p class="card-text read-more-wrap">Kurze Info zu meiner Abnehm-Challenge:. Weitere 4 Wochen vorbei und es gibt wieder Gutes zu berichten. Die nächsten 4 Kilos sind verschwunden und das obwohl der ein oder andere "Schlampertag" dabei
          war.<br><span id="text2"> Das Konzept ist genial. Vor allen Dingen für diejenigen, wie ich, die zwar abnehmen wollen aber mit Sport nicht soviel am Hut haben.
          </span></p>
        <button class="btn btn-secondary card-btn" id="toggle2">Read More</button>
      </div>
    </div>
  </div>
</div>

提前致谢!

Answer 1

由于 Bootstrap 网格是使用 flexbox 构建的，您可以为卡片元素提供 height: 100% 属性。通过使卡体也 flex ，可以将按钮水平对齐，与 margin-top: auto 相同。

.card {
    height: 100%;
}

.card-body {
    display: flex;
    flex-direction: column;
}

.card-btn {
    margin-top: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>

<div class="row">
    <div class="col-sm-3 card-flex mx-auto">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Andrea</h4>
                <p class="card-text">Mir geht es prima, bin immer statt! Das gab es noch nie bei mir und ich habe mich heut gewogen wieder eins weniger also nun 2,5 kg nach einer Woche.<br>Fantastisch step by step aber endlich funktioniert bei mir etwas, was jahrelang nicht funktioniert hat. Bin sehr zufrieden und fühl mich super. Auf geht's in die 2. Phase</p>
                <button class="btn btn-secondary card-btn">Read More</button>
            </div>
        </div>
    </div>

    <div class="col-sm-3 card-flex mx-auto">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Daniel</h4>
                <p class="card-text">Ich muss wirklich sagen das ich sehr skeptisch gegenüber dem Konzept gewesen bin. Wahrscheinlich weil ich schon so viel ausprobiert hatte. Jetzt, nach 8 Wochen habe ich 9,3 Kilo auf der Waage runter.<br>Ich fühle mich einfach unfassbar gut, habe nicht das geringste Bedürfnis zu naschen oder zwischen den Mahlzeiten zu Essen. Das hatte ich wirklich noch NIE!</p>
                <button class="btn btn-secondary card-btn">Read More</button>
            </div>
        </div>
    </div>

    <div class="col-sm-3 card-flex mx-auto">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Monika</h4>
                <p class="card-text">Kurze Info zu meiner Abnehm-Challenge:. Weitere 4 Wochen vorbei und es gibt wieder Gutes zu berichten. Die nächsten 4 Kilos sind verschwunden und das obwohl der ein oder andere "Schlampertag" dabei war.<br>Das Konzept ist genial. Vor allen Dingen für diejenigen, wie ich, die zwar abnehmen wollen aber mit Sport nicht soviel am Hut haben.</p>
                <button class="btn btn-secondary card-btn">Read More</button>
            </div>
        </div>
    </div>
</div>