CSS Bootstrap 垂直对齐 - 3 列答案

【问题标题】：CSS Bootstrap Vertical Alignment - 3 ColumnCSS Bootstrap 垂直对齐 - 3 列
【发布时间】：2018-10-13 17:25:52
【问题描述】：

我有 3 列，有 3 个不同的标题，有些更长，占用更多空间，但我想在同一个地方开始我的段落。标题应保持一致的高度，无论文本数量如何。

我可以为每个标题使用最小高度，但我认为还有另一种方法可以对齐段落并使它们以相同的方式进行。

Before

What i want

https://jsfiddle.net/rxsok1jm/

<div class="row">
            <div class="col-md-12 col-lg-4">
              <h2 class="">
                <i class="fa fa-user fa-fw"></i>Retrouvez qui vous appelle !
                 </h2>
              <p class="">Vous avez reçu un appel inconnu et vous ne connaissez pas l’identité du propriétaire ? Ce numéro est-il nuisible ou est-ce vraiment quelqu’un qui souhaite vous joindre ? Trouvez les informations concernant le numéro de téléphone pour vous
                faire un avis.
                <br> </p>
              <div class="col-md-12 text-center">
                <a href="#" class="btn btn-outline-primary">En savoir plus</a>
              </div>
            </div>
            <div class="col-md-12 col-lg-4">
              <h2 class="">
                <i class="fa fa-user fa-fw"></i>Faites vous un avis sur chaque numéro inconnu.
                <br> </h2>
              <p class="">La communauté Infos-numero.com est là pour vous aider, grâce aux différents avis, à vous faire une idée concernant un numéro de téléphone inconnu et de déterminer si votre interlocuteur est nuisible ou fiable.
                <br> </p>
              <div class="col-md-12 text-center">
                <a href="#" class="btn btn-outline-primary">En savoir plus</a>
              </div>
            </div>
            <div class="col-md-12 col-lg-4">
              <h2 class="">
                <i class="fa fa-user fa-fw"></i>Racontez nous votre experience.
                <br> </h2>
              <p class="">N’hésitez pas à partager votre expérience téléphonique, qu’elle soit positive ou négative. Partager des avis aide notre communauté à se faire un avis plus précis sur les réelles intentions de votre interlocuteur.
                <br> </p>
              <div class="col-md-12 text-center">
                <a href="#" class="btn btn-outline-primary">En savoir plus</a>
              </div>
            </div>
          </div>

【问题讨论】：

显示你的代码不是图片
是的 :) 添加了代码
这有帮助吗？ .col-md-12 { margin-left: 20%; } p { width: 50%; } .btn { margin-left: -100% }

标签： css flexbox alignment vertical-alignment

【解决方案1】：

在引导程序中，您可以在列中使用此类：

<div class="col-sm-4 col-xs-6 col-md-4 col-lg-4>Your paraghraph</div>

【讨论】：

是的，但我希望所有段落都从同一行开始，但标题有不同的行
是的，明白所以试试这个：max-width:200px;自动换行：断词；在你的标题类中，或者你的 h2 直接在你的案例中