如何使這些列固定高度？

Question

我使用 Bootstrap 4 創建了這個全角部分。在大屏幕上它們看起來不錯，但是隨着我減小屏幕尺寸，列高不相等。 我怎樣才能使它們的高度相等，這樣如果一個包含的內容比另一個多，它就不會影響？

這是我所看到的：

我嘗試將 100% 的高度添加到 services-3-box-wrapper class。 任何幫助表示贊賞。

 #services-3 { padding-top: 0px; padding-bottom: 0px; } #services-3.container-fluid { padding-left: 0; padding-right: 0; } #services-3.service-box-1 { background-color: #199adb; padding-top: 35px; padding-bottom: 35px; padding-left: 45px; padding-right: 45px; } #services-3.service-box-1.sb-icon i { color: #ffffff; font-size: 40px; } #services-3.service-box-1.sb-title { margin-top: 20px; } #services-3.service-box-1.sb-title h5 { color: #ffffff; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 19px; } #services-3.service-box-1.sb-desc p { color: #ffffff; text-align: center; } #services-3.service-box-2 { background-color: #5eb8e4; padding-top: 35px; padding-bottom: 35px; padding-left: 45px; padding-right: 45px; } #services-3.service-box-2.sb-icon i { color: #ffffff; font-size: 40px; } #services-3.service-box-2.sb-title { margin-top: 20px; } #services-3.service-box-2.sb-title h5 { color: #ffffff; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 19px; } #services-3.service-box-2.sb-desc p { color: #ffffff; text-align: center; } #services-3.service-box-3 { background-color: #199adb; padding-top: 35px; padding-bottom: 35px; padding-left: 45px; padding-right: 45px; } #services-3.service-box-3.sb-icon i { color: #ffffff; font-size: 40px; } #services-3.service-box-3.sb-title { margin-top: 20px; } #services-3.service-box-3.sb-title h5 { color: #ffffff; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 19px; } #services-3.service-box-3.sb-desc p { color: #ffffff; text-align: center; } #services-3.service-box-4 { background-color: #5eb8e4; padding-top: 35px; padding-bottom: 35px; padding-left: 45px; padding-right: 45px; } #services-3.service-box-4.sb-icon i { color: #ffffff; font-size: 40px; } #services-3.service-box-4.sb-title { margin-top: 20px; } #services-3.service-box-4.sb-title h5 { color: #ffffff; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 19px; } #services-3.service-box-4.sb-desc p { color: #ffffff; text-align: center; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <section id="services-3"> <div class="container-fluid"> <div class="row no-gutters"> <.-- Service 1 --> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6"> <div class="services-3-box-wrapper"> <div class="service-box-1"> <div class="sb-icon d-flex justify-content-center"> <i class="fas fa-user-md"></i> </div> <div class="sb-title"> <h5>Qualified Doctors</h5> </div> <div class="sb-desc"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad.</p> </div> </div> </div> </div> <.-- Service 2 --> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6"> <div class="services-3-box-wrapper"> <div class="service-box-2"> <div class="sb-icon d-flex justify-content-center"> <i class="fas fa-ambulance"></i> </div> <div class="sb-title"> <h5>Emergency Services</h5> </div> <div class="sb-desc"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p> </div> </div> </div> </div> <!-- Service 3 --> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6"> <div class="services-3-box-wrapper"> <div class="service-box-3"> <div class="sb-icon d-flex justify-content-center"> <i class="fas fa-procedures"></i> </div> <div class="sb-title"> <h5>In-patient care</h5> </div> <div class="sb-desc"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p> </div> </div> </div> </div> <!-- Service 4 --> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6"> <div class="services-3-box-wrapper"> <div class="service-box-4"> <div class="sb-icon d-flex justify-content-center"> <i class="fas fa-user-nurse"></i> </div> <div class="sb-title"> <h5>Friendly Staff</h5> </div> <div class="sb-desc"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p> </div> </div> </div> </div> </div> </div> </section>

Answer 1

只需將這兩條規則添加到您的 CSS 即可解決問題。

  .services-3-box-wrapper {
     height: 100%;
  }
  div[class^="service-box"]{
    height: 100%;
  }

實際上 Flex 子項自動具有相同的高度，但是對於內部項目，您必須將其設置為 100%，並且您正在做正確的事情，但是您必須確保您提供背景顏色的 div 需要具有該高度 100% 屬性以及所有上面的父母。 檢查這個工作

 #services-3 { padding-top: 0px; padding-bottom: 0px; } #services-3.container-fluid { padding-left: 0; padding-right: 0; } #services-3.service-box-1 { background-color: #199adb; padding-top: 35px; padding-bottom: 35px; padding-left: 45px; padding-right: 45px; } #services-3.service-box-1.sb-icon i { color: #ffffff; font-size: 40px; } #services-3.service-box-1.sb-title { margin-top: 20px; } #services-3.service-box-1.sb-title h5 { color: #ffffff; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 19px; } #services-3.service-box-1.sb-desc p { color: #ffffff; text-align: center; } #services-3.service-box-2 { background-color: #5eb8e4; padding-top: 35px; padding-bottom: 35px; padding-left: 45px; padding-right: 45px; } #services-3.service-box-2.sb-icon i { color: #ffffff; font-size: 40px; } #services-3.service-box-2.sb-title { margin-top: 20px; } #services-3.service-box-2.sb-title h5 { color: #ffffff; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 19px; } #services-3.service-box-2.sb-desc p { color: #ffffff; text-align: center; } #services-3.service-box-3 { background-color: #199adb; padding-top: 35px; padding-bottom: 35px; padding-left: 45px; padding-right: 45px; } #services-3.service-box-3.sb-icon i { color: #ffffff; font-size: 40px; } #services-3.service-box-3.sb-title { margin-top: 20px; } #services-3.service-box-3.sb-title h5 { color: #ffffff; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 19px; } #services-3.service-box-3.sb-desc p { color: #ffffff; text-align: center; } #services-3.service-box-4 { background-color: #5eb8e4; padding-top: 35px; padding-bottom: 35px; padding-left: 45px; padding-right: 45px; } #services-3.service-box-4.sb-icon i { color: #ffffff; font-size: 40px; } #services-3.service-box-4.sb-title { margin-top: 20px; } #services-3.service-box-4.sb-title h5 { color: #ffffff; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 19px; } #services-3.service-box-4.sb-desc p { color: #ffffff; text-align: center; }.services-3-box-wrapper { height: 100%; } div[class^="service-box"]{ height: 100%; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <section id="services-3"> <div class="container"> <div class="row no-gutters"> <.-- Service 1 --> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6"> <div class="services-3-box-wrapper"> <div class="service-box-1"> <div class="sb-icon d-flex justify-content-center"> <i class="fas fa-user-md"></i> </div> <div class="sb-title"> <h5>Qualified Doctors</h5> </div> <div class="sb-desc"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad.</p> </div> </div> </div> </div> <.-- Service 2 --> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6"> <div class="services-3-box-wrapper"> <div class="service-box-2"> <div class="sb-icon d-flex justify-content-center"> <i class="fas fa-ambulance"></i> </div> <div class="sb-title"> <h5>Emergency Services</h5> </div> <div class="sb-desc"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p> </div> </div> </div> </div> <!-- Service 3 --> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6"> <div class="services-3-box-wrapper"> <div class="service-box-3"> <div class="sb-icon d-flex justify-content-center"> <i class="fas fa-procedures"></i> </div> <div class="sb-title"> <h5>In-patient care</h5> </div> <div class="sb-desc"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p> </div> </div> </div> </div> <!-- Service 4 --> <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6"> <div class="services-3-box-wrapper"> <div class="service-box-4"> <div class="sb-icon d-flex justify-content-center"> <i class="fas fa-user-nurse"></i> </div> <div class="sb-title"> <h5>Friendly Staff</h5> </div> <div class="sb-desc"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p> </div> </div> </div> </div> </div> </div> </section>

例子。