【问题标题】:How to make components vertically centered with equal height column in bootstrap 4如何在引导程序 4 中使组件垂直居中且等高列
【发布时间】:2019-12-16 07:02:59
【问题描述】:

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

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

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

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

这是我的Demo

【问题讨论】:

    标签: css bootstrap-4


    【解决方案1】:

    给你,

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

    【讨论】:

      猜你喜欢
      • 2017-06-09
      • 2019-03-25
      • 2018-08-20
      • 2014-04-23
      • 1970-01-01
      • 2018-08-09
      • 1970-01-01
      • 2021-02-18
      • 2018-05-13
      相关资源
      最近更新 更多