提问人：Victor 提问时间：11/16/2023 最后编辑：isherwoodVictor 更新时间：11/17/2023 访问量：70
为什么我的列边框不是全高？
Why aren't my column borders full height?
问：
使用 Bootstrap 5.3.我希望三列中的所有内容都是垂直对齐的，所以我添加了 .但边界似乎没有延伸到顶部和底部（见黄色圆圈）。我可以使用组件，但想知道是否可以在没有组件的情况下完成。align-items-center.row.card.card
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="row align-items-center border-top border-bottom border-dark-subtle fs-5 text-center text-secondary">
<div class="col-12 col-md-4 p-5">
<img src="https://via.placeholder.com/200x50" class="mb-3" width="200">
<p>Looking to replicate the media object component from Bootstrap 4? Recreate it in no time with a few flex</p>
</div>
<div class="col-12 col-md-4 p-5 border-start border-end border-dark-subtle">
<span class="d-block display-3 text-light fw-bold">5G</span>
<p>This is some content from a media component. </p>
</div>
<div class="col-12 col-md-4 p-5">
<span class="d-block">Up to</span>
<span class="d-block text-success display-3 fw-bold">95%</span>
<p>Network coverage</p>
</div>
</div>答：
7赞
Bear
11/17/2023
#1
您似乎正在尝试使用 Bootstrap 的网格系统垂直对齐列的内容并应用边框来实现特定设计。在应用边框以实现全高列边框时，由于边框在 CSS 中的呈现方式，您可能会遇到完美对齐它们的问题。
解决此问题的一种方法是在每列中使用弹性框方法，以创建全高边框，同时保持内容的对齐方式。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="row align-items-center fs-5 text-center text-secondary">
<div class="col-12 col-md-4 p-0 d-flex flex-column align-items-center">
<div class="border border-dark-subtle w-100 p-5">
<img src="https://via.placeholder.com/200x50" class="mb-3" width="200">
<p>Looking to replicate the media object component from Bootstrap 4? Recreate it in no time with a few flex</p>
</div>
</div>
<div class="col-12 col-md-4 p-0 d-flex flex-column align-items-center">
<div class="border-start border-end border-dark-subtle w-100 p-5">
<span class="d-block display-3 text-light fw-bold">5G</span>
<p>This is some content from a media component.</p>
</div>
</div>
<div class="col-12 col-md-4 p-0 d-flex flex-column align-items-center">
<div class="border border-dark-subtle w-100 p-5">
<span class="d-block">Up to</span>
<span class="d-block text-success display-3 fw-bold">95%</span>
<p>Network coverage</p>
</div>
</div>
</div>
此代码将 flexbox （ class） 和 flex-column（） 属性应用于每一列，以确保边框拉伸整个高度，同时保持内容垂直居中 （）。边框直接应用于每列中的内部 div，以实现所需的边框样式。d-flexflex-columnalign-items-center
根据需要调整填充 （） 和其他样式，以适合您的设计偏好。p-5
评论
0赞
Admin
11/25/2023
我认为他是对的
0赞
Admin
11/28/2023
我认为他是对的
评论