Bootstrap 对齐列中的项目

Question

我遇到了以下问题：

图1为样机：

我使用 Bootstrap 5 作为 css 框架。我以为我可以通过内置的列来处理它，但我现在没有找到任何解决方案和努力。

图2是我的解决方案：

我试过 flexbox 但找不到任何解决方案。

<div class="col-lg-6 col-md-1">
 <div class="row">
  <img src="https://place-hold.it/90" class="col-lg-3 col-md-12 facts-img">
  <h3 class="facts-header col-lg-2 col-md-12">
   Licht
  </h3>
  <p class="facts-p col-lg-6 col-md-12 facts-text">
   Das zentrale Element in unserem Leben. Es weckt Emotionen, beeinflusst unser
   Wohlbefinden und füllt unsere Energiespeicher auf. Durch das Licht nehmen wir die
   unterschiedlichen Farben wahr. Licht schafft Ambiente.
  </p>
 </div>
</div>

Answer 1

您的结构不正确。您需要一个 row 来包含直接的 col，然后需要一个新的 row 来包含下一个 col。试试这个：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="row">
    <div class="col-lg-6">
      <div class="row">
        <div class="col-sm-2 d-flex align-items-center justify-content-center">
          <img src="https://place-hold.it/90" class="col-lg-3 col-md-12 facts-img">
        </div>
        <div class="col-sm-10">
          <h3 class="facts-header col-lg-2 col-md-12">
            Licht
          </h3>
          <p class="facts-p col-lg-6 col-md-12 facts-text">
            Das zentrale Element in unserem Leben. Es weckt Emotionen, beeinflusst unser Wohlbefinden und füllt unsere Energiespeicher auf. Durch das Licht nehmen wir die unterschiedlichen Farben wahr. Licht schafft Ambiente.
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="row">
        <div class="col-sm-2 d-flex align-items-center justify-content-center">
          <img src="https://place-hold.it/90" class="col-lg-3 col-md-12 facts-img">
        </div>
        <div class="col-sm-10">
          <h3 class="facts-header col-lg-2 col-md-12">
            Licht
          </h3>
          <p class="facts-p col-lg-6 col-md-12 facts-text">
            Das zentrale Element in unserem Leben. Es weckt Emotionen, beeinflusst unser Wohlbefinden und füllt unsere Energiespeicher auf. Durch das Licht nehmen wir die unterschiedlichen Farben wahr. Licht schafft Ambiente.
          </p>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

Answer 2

只是为了给鹰眼视角。在以下层次结构中使用类

.Container 
   . row //main row
      .col //block for Licht  
        .row // wrapper for Licht
          .col // column for round object
          .col // column for text element
             .row // for heading Licht
             .row // for description 

      .col // column for Design 
        .row // wrapper for Design
          .col // column for round object
          .col // column for text element
             .row // for heading Design
             .row // for description

Answer 3

你可以尝试使用媒体对象

示例 1

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
  <div class="flex-shrink-0">
   <img src="https://www.pavilionweb.com/wp-content/uploads/2017/03/man-300x300.png" class="mr-3"  width="150" alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
  <h5 class="mt-0">Media heading</h5>
   <p>
   This is some content from a media component. You can replace this with any content and adjust it as needed.
   </p> 
  </div>
</div>

示例 2

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-lg-6">
      <div class="row">
        <div class="col-sm-3">
          <img src="https://www.pavilionweb.com/wp-content/uploads/2017/03/man-300x300.png" class="mr-3 img-fluid"  alt="...">
        </div>
        <div class="col-sm-9">
          <h3 class="facts-header col-lg-2 col-md-12">
            heading
          </h3>
          <p class="facts-p col-lg-6 col-md-12 facts-text">
           This is some content from a media component. You can replace this with any content and adjust it as needed.
          </p>
        </div>
      </div>
    </div>
</div>

Answer 4

您也可以使用 flex 来做到这一点

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="d-flex flex-column flex-md-row p-4 w-100">
 <div class="d-flex flex-row align-items-center">
  <div class="p-2">
   <img src="https://place-hold.it/90" class="col-lg-12 col-md-12 facts-img rounded-circle">
  </div>
  <div class="d-flex flex-column ">
  <h3 class="facts-header col-lg-2 col-md-12">
   Licht
  </h3>
  <p class="facts-p col-lg-8 col-md-12 facts-text">
   Das zentrale Element in unserem Leben. Es weckt Emotionen, beeinflusst unser
   Wohlbefinden und füllt unsere Energiespeicher auf. Durch das Licht nehmen wir die
   unterschiedlichen Farben wahr. Licht schafft Ambiente.
  </p>
  </div>
 </div>
 
 <div class="d-flex flex-row align-items-center">
  <div class="p-2">
   <img src="https://place-hold.it/90" class="col-lg-12 col-md-12 facts-img rounded-circle">
  </div>
  <div class="d-flex flex-column ">
  <h3 class="facts-header col-lg-2 col-md-12">
   Licht
  </h3>
  <p class="facts-p col-lg-8 col-md-12 facts-text">
   Das zentrale Element in unserem Leben. Es weckt Emotionen, beeinflusst unser
   Wohlbefinden und füllt unsere Energiespeicher auf. Durch das Licht nehmen wir die
   unterschiedlichen Farben wahr. Licht schafft Ambiente.
  </p>
  </div>
 </div>
</div>

Bootstrap 对齐列中的项目

Bootstrap align items in column

css

bootstrap-5