引导5拉伸div背景和内容中心

Question

我正在尝试使用对齐项-拉伸来拉伸一个div和对齐项中心的背景，以集中内容(垂直！)。不知何故，当我使用一个很长的标题时，对齐项中心不会被应用。

​

“专用”需要与另一张卡垂直对齐。

​

这就是应该发生的事情；将图像垂直排列在相同的高度上。

我做错了什么？

更新:添加了自己风格的CSS +特定于源代码更新的引导程序:当我应用内联最小高度时，内容将垂直中心(这很好)。

<div class="col-6 grow d-flex align-items-stretch">
  <div class="col-12 tile elevation-1">
  <div class="row no-gutters align-items-center">
    <div class="col-12 col-md-4">
      <div class="col-12">
        <img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
      </div>
    </div>
    <div class="col-12 col-md-8 tile-product-content-horizontal" style="min-height:300px;">
    <div class="col-12 ">
        <span class="brand"> Brand name </span>
        <h3> Short title </h3>
    </div>
    </div>
  </div>
  </div>
</div>
  <div class="col-6 grow d-flex align-items-stretch">
    <div class="col-12 tile elevation-1">
    <div class="row no-gutters align-items-center">
      <div class="col-12 col-md-4">
        <div class="col-12">
          <img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
        </div>
      </div>
      <div class="col-12 col-md-8 tile-product-content-horizontal" style="min-height:300px;">
      <div class="col-12 ">
          <span class="brand"> Brand name </span>
          <h3> This is a very long title which stretches the div </h3>
      </div>
      </div>
    </div>
  </div>
</div>

CSS：

.tile-product-content-horizontal {
          padding: 20px 40px 20px 5px;
}
.tile {
  border-radius: 16px;
  background-color: #FFF;
  margin-bottom: 20px;
  background-image: url(assets/card-chevron.png);
  background-repeat: no-repeat;
  background-position: right 30px center;
} 

/* BOOTSTRAP SPECIFIC */
.align-items-stretch {
    align-items:stretch !important
}

.align-items-center {
    align-items:center !important
}

.d-flex {
    display:flex !important
}

Answer 1

您需要垂直地对列进行分层，然后垂直对齐它们的内容。

这样做：

.tile-product-content-horizontal

• Use .h-100在.row上使用.h-100，在最短的列上删除 .d-flex和..alig items-cener。

<div class="col-6 grow d-flex align-items-stretch">
  <div class="col-12 tile elevation-1">
    <div class="row no-gutters h-100">
      <div class="col-12 col-md-4">
        <div class="col-12">
          <img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
        </div>
      </div>
      <div class="col-12 col-md-8 d-flex align-items-center" >
        <div class="tile-product-content-horizontal">
          <span class="brand"> Brand name </span>
          <h3> This is a very long title which stretches the div </h3>
        </div>
      </div>
    </div>
  </div>
</div>

​

.tile-product-content-horizontal {
  padding: 20px 40px 20px 5px;
}

.tile {
  border-radius: 16px;
  background-color: #FFF;
  margin-bottom: 20px;
  background-image: url(assets/card-chevron.png);
  background-repeat: no-repeat;
  background-position: right 30px center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">


<div class="col-6 grow d-flex align-items-stretch">
  <div class="col-12 tile elevation-1">
    <div class="row no-gutters h-100">
      <div class="col-12 col-md-4">
        <div class="col-12">
          <img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
        </div>
      </div>
      <div class="col-12 col-md-8 d-flex align-items-center">
        <div class="tile-product-content-horizontal">
          <span class="brand"> Brand name </span>
          <h3> Short title </h3>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col-6 grow d-flex align-items-stretch">
  <div class="col-12 tile elevation-1">
    <div class="row no-gutters h-100">
      <div class="col-12 col-md-4">
        <div class="col-12">
          <img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
        </div>
      </div>
      <div class="col-12 col-md-8 d-flex align-items-center">
        <div class="tile-product-content-horizontal">
          <span class="brand"> Brand name </span>
          <h3> This is a very long title which stretches the div </h3>
        </div>
      </div>
    </div>
  </div>
</div>

​