Bootstrap 5 justify-content 无法正常工作并且无法垂直居中内容

Question

我有以下代码，我使用 bootstrap 5：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<br><br>

<div class="list-group-item d-flex flex-row">
    <div class="flex-column">
      <h4>A Test Recipe</h4>
      <p>This is simply a test</p>
    </div>

    <div class="flex-row align-self-center justify-content-end">
      <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
           alt="A Test Recipe"
           style="max-height: 50px !important">
    </div>
</div>

我正在尝试将图像移至

list-group-item

div 的末尾。我尝试使用

justify-content-end

但这没有效果。我也尝试过

align-self-end

这也不会将图像带到右侧。

至于带有

flex-column

类的 div，我试图将其内容垂直居中。但它也不起作用，它应该像图像一样居中。我通过使用

align-self-center

类获得了垂直居中的图像。但是，当我将此类应用于具有

flex-column

类的 div 时，它不起作用。

我做错了什么？

Answer 1

<linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
    <div class="card m-3 border-0" style="max-width: 250px;">
        <div class="row g-0">
            <div class="col-5">
                <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
                     class="img-fluid rounded-5"
                     alt="A Test Recipe">
            </div>
            <div class="col-7">
                <div class="card-body">
                    <h5 class="card-title">A Test Recipe </h5>
                    <p class="card-text">This is simply a test.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<br><br>

<div class="list-group-item d-flex flex-row justify-content-between">
    <div class="flex-column">
      <h4>A Test Recipe</h4>
      <p>This is simply a test</p>
    </div>

    <div class="flex-column">
      <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
           alt="A Test Recipe"
           style="max-height: 50px !important">
    </div>
</div>

请注意，justify-content- Between 类应该位于包含行上。另请注意，align-* 类用于垂直对齐，而 justify-content-* 类用于水平对齐。

Answer 3

试试这个。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>

<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
    <div class="card m-3 border-0" style="max-width: 350px;">
        <div class="row g-0">
            <div class="col-5">
                <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
                     class="img-fluid rounded-3"
                     alt="A Test Recipe">
            </div>
            <div class="col-7">
                <div class="card-body">
                    <h5 class="card-title">A Test Recipe </h5>
                    <p class="card-text">This is simply a test.</p>
                </div>
            </div>
        </div>
    </div>
</div>