如何对齐列中的多个元素？

Posted 2021-04-23

我在列中有两个对象（段落和图像）。我需要底部的图像和顶部的段落。可悲的是，我找不到解决这个问题的bootstrap类。我认为“对齐项目之间”会完成工作，但事实并非如此。 “align-self-end”作为图像的类也不起作用。

<div class="container">
    <h1 class="display-3 text-center mb-5">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    </h1>
    <div class="row">
        <div class="col-md-6">
            <!-- I need this paragraph to stay at the top -->
            <p class="text-muted text-center">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis laudantium ducimus veritatis aliquam voluptas, maiores error inventore facere minus rem.
            </p>
            <!-- I need this image to be at the bottom of the container -->
            <img src="imgs/abc.svg" class="img-fluid" alt="" />
        </div>
        <div class="col-md-6">
            <!-- Other stuff-->
        </div>
        </div>
    </div>
</div>

Here is an image of what I want

答案

您可以将以下类和样式应用于第一列：

.space-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Example bootply

请注意我已经修复了bootply中第一列的结束标记（您已经嵌套了上面代码中第一列内的第二列）

另一答案

看起来你错过了关闭div打破网格。

codepen：https://codepen.io/brooksrelyt/pen/JwQpqm

<div class="container">
    <h1 class="display-3 text-center mb-5">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    </h1>
    <div class="row">
        <div class="col-md-6">
            <!-- I need this paragraph to stay at the top -->
            <p class="text-muted text-center">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis laudantium ducimus veritatis aliquam voluptas, maiores error inventore facere minus rem.
            </p>
            <!-- I need this image to be at the bottom of the container -->
            <img src="https://via.placeholder.com/150x100" class="img-fluid" alt="" />
<!--           <img src="imgs/abc.svg" class="img-fluid" alt="" /> -->
            </div>
            <div class="col-md-6">
              <!-- Other stuff-->
              <p>Form other stuff</p>
            </div>
        </div>
    </div>
</div>