css - CSS Bootstrap 垂直对齐 - 3 列
问题描述
我有 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>
解决方案
在引导程序中,您可以在列中使用此类:
<div class="col-sm-4 col-xs-6 col-md-4 col-lg-4>Your paraghraph</div>
推荐阅读
- javascript - javascript - 当对象数组完全匹配时如何获取对象数组中的对象的索引
- python - 无法将 python 脚本输出导出到同一个 csv 文件中
- java - 为什么Hibernate源码中没有org.hibernate.hql.antlr包?
- javascript - js中的收银机
- css - ie11忽略css的特定块但不是整个样式表
- javascript - 将数据对象传递给触发事件
- c++ - 在 Windows 上读取/写入未格式化的 SD 卡
- android - 使用 Qt 在 Android 上访问共享存储
- c++ - 在 ARM 裸机上使用 Boost.coroutine2
- azure - Azure 云 Web 应用程序在启动时会减慢加载速度