如何解决(Bootstrap 4+) - 具有多个元素的列:在同一行上对齐元素
所以 - 是的,它又是某种垂直对齐的东西(抱歉!)。我阅读了有关此主题的文档和其他问题,做了我的第一个项目并尝试了不同的方法,但不知何故,我无法弄清楚如何使用 bootrap 以“正确的方式”做到这一点。
我希望列内的元素与另一列中的相应元素在同一条水平线上(从顶部开始)对齐。因此,h3 元素都在同一条线上水平线,按钮都在同一条线上等
我做了 3 列
<div class="container">
<div class="row justify-content-around>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> looooong text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> looooong text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> Short text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
我可以在每一列上使用“justify-content-between”。但是,如果其中一个“p”内容比另一列长,它将无法按预期工作 - 较短的文本不会与其他文本在同一水平线上开始,如下面的示例所示.如果客户稍后更改文本,则使用手动边距修复它会弄乱它。
Justify-Content-Between: This is what I don't want
实现这种对齐的好方法是什么?
解决方法
您可以将您的内容和您的图标/按钮在每列内分成单独的行,然后将 div 与图标/按钮对齐到列的底部。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-around">
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
</div>
</div>
我使用 align-self-end 来定位图标和按钮在底部的行,但是 IE11 不支持 flex 开始和结束,所以布局在 IE11 上看起来不太好。
另一个注意事项 – 您的示例代码缺少行中类的结束引号:<div class="row justify-content-around>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。