Bootstrap 5 拉伸 div 背景和内容中心

Posted 2023-03-17

【中文标题】Bootstrap 5 拉伸 div 背景和内容中心

【英文标题】：Bootstrap 5 stretch div background and content center

【发布时间】：2021-06-18 21:55:05

【问题描述】：

我正在尝试使用 align-items-stretch 来拉伸 div 的背景，并使用 align-items-center 来使内容居中（垂直！）。不知何故，当我使用很长的标题时，不会应用 align-items-center。

“奉献”需要与另一张卡片垂直居中对齐

这是应该发生的；垂直对齐相同高度的图像

我做错了什么？

更新：添加了自己风格的 CSS + 来自源代码的特定引导程序 更新：当我应用 inline min-height 时，内容将垂直居中（这很好）。

<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"  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"  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

【问题讨论】：

也添加css部分

添加了自己风格的 CSS + bootstrap

元素应该是什么样子的？

已应用。我刚刚测试过。为您的代码创建一个code snippet 并包含一张图片。

好的，我有一些工作：当我应用内联样式时：“min-height:300px;”元素垂直居中（这很好）。我可以在不应用最小高度的情况下执行此操作吗？

【参考方案1】：

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

---

做这些：

删除内部 .col-12 并改用 .tile-product-content-horizo​​ntal 在 .row 上使用 .h-100 并删除 .align-items-center 在最短的列上使用 .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"  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"  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"  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>