(Bootstrap 4+) - 具有多个元素的列：在同一行上对齐元素

Question

所以 - 是的，它又是某种垂直对齐的东西（抱歉！）。我阅读了有关该主题的文档和其他问题，做了我的第一个项目并尝试了不同的方法，但不知何故我无法弄清楚如何使用引导程序以“正确的方式”做到这一点。

我希望列内的元素与另一列中的相应元素在同一水平线上（从顶部开始）对齐。因此，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

实现这种对齐的好方法是什么？

Answer 1

您可以 divide 将您的内容和 icon/button 放入每列中的单独行中，然后将 div 与 icon/button 对齐列底部。

<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, consectetur adipiscing elit, 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>

(Bootstrap 4+) - 具有多个元素的列：在同一行上对齐元素

(Bootstrap 4+) - Columns with multiple Elements: Align elements on the same line

html

css

alignment

twitter-bootstrap

bootstrap-4