时间戳

首页 > 解决方案 > 如何在引导程序 4 中使组件垂直居中且等高列

css - 如何在引导程序 4 中使组件垂直居中且等高列

问题描述

我已经应用了这个问题的解决方案：Bootstrap 4 vertical center - equal height cards

但是，我的问题没有得到解决。尽管我已经应用了这些，但我无法实现相同的高度和垂直居中：

<div class="cycle-des h-100 justify-content-center">Product Cycle</div>

这是我的问题的屏幕截图：

在此处输入图像描述

这是我的演示

标签： cssbootstrap-4

解决方案

干得好，

  <div class="container">
      <div class="row">
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="cycle-des h-100 align-items-center justify-content-center">Product Cycle</div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">01</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">handloom: 4-7days</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">02</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">S/S MQ: 50M</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">03</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">S/S: 25-30days</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">04</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">Order MQ: 2000M</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">05</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">Order delivery date: 35-50 days</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    .cycle-num, .cycle-des {
      color: #fff;
      text-align: center;
      padding: 20px 10px;
      display: flex;
    }
    .cycle-num {
      background-color: #666;
    }
    .cycle-des {
      background-color: #333;
    }

但我相信你可以减少 div 并且可以做得更好。只是一个建议，您不必在任何地方都使用网格类。只需将其用于布局。

https://jsfiddle.net/mdsebans/yhcb30L5/5/

推荐阅读