CSS Bootstrap Вертикальное выравнивание - 3 колонки - PullRequest
0 голосов
/ 03 мая 2018

У меня есть 3 столбца с 3 разными заголовками, некоторые из них длиннее и занимают больше места, но я хочу начать свои абзацы в том же месте. Заголовки должны иметь одинаковую высоту независимо от объема текста.

Я могу использовать минимальную высоту для каждого заголовка, но я думаю, что есть другой способ выровнять абзацы и заставить их идти тем же путем.

До

Что я хочу

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>

1 Ответ

0 голосов
/ 03 мая 2018

В начальной загрузке вы можете использовать этот класс в столбце:

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