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

Posted 2023-03-05

【中文标题】(Bootstrap 4+) - 具有多个元素的列：在同一行上对齐元素

【英文标题】：(Bootstrap 4+) - Columns with multiple Elements: Align elements on the same line

【发布时间】：2021-05-29 01:15:19

【问题描述】：

所以 - 是的，这又是某种垂直对齐的东西（对不起！）。我阅读了有关该主题的文档和其他问题，完成了我的第一个项目并尝试了不同的方法，但不知何故，我无法弄清楚如何使用 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"  >
         <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"  >
         <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"  >
         <button> A button </button>
    </div>
   </div>
</div>

我可以在每一列上使用“justify-content-between”。但是，如果其中一个“p”内容比另一列的内容长，它将无法按预期工作 - 较短的文本不会与其他文本在同一水平线上开始，如下面的示例所示.如果客户端稍后更改文本，使用手动边距修复它会搞砸。

Justify-Content-Between: This is what I don't want

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

【参考方案1】：

您可以将您的内容和您的图标/按钮分成每列中的单独行，然后将 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"  >
                        <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"  >
                        <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"  >
                        <button> A button </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

我使用 align-self-end 来定位底部有图标和按钮的行，但是 IE11 不支持 flex start 和 end，所以布局在 IE11 上看起来不太好。

另一个注意事项 - 您的示例代码缺少以下行中类的结束引号：<div class="row justify-content-around>

【讨论】：

啊！非常感谢 - 现在我明白了。一开始我还考虑过用其他行嵌套它。但不知何故，我的大脑说，它会以错误的顺序堆叠行和列，从而弄乱移动布局。