Question

我在列中有两个对象（一个段落和一个图像）。我需要在底部的图像和在顶部的段落。可悲的是，我找不到解决该问题的引导程序类。我认为“ align-items-weenween”可以完成工作，但没有完成。 “ 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

Answer 1

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

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

Example bootply

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

Answer 2

好像您错过了一个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>

如何在列内对齐多个元素？

2 个答案: