Question

我正在尝试在3个单独的div中将3个按钮水平对齐。但是我就是无法正常工作。我正在使用引导程序和引导程序卡：

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

您是否尝试过将所有内容都放在<div class="container"> your code </div>标签中？

Answer 2

最简单的方法是在媒体查询中，根据您期望的最长描述为.card-text设置一个固定高度。这也保留了卡本身的填充和设计。

例如：

.card-text{
    height:200px;
}

Answer 3

由于Bootstrap网格是使用flexbox构建的，因此可以为card元素赋予height: 100%属性。通过使卡体也具有柔韧性，可以使按钮与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>

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

3 个答案: