如何调整Bootstrap中列的高度？实现feature盒子等高

你的问题出在两个关键细节上：

• 承载feature的.row用了align-content-between，这个类会让行内的列元素不填满行的高度，而是在垂直方向分散排列，导致列高度随内容变化，无法统一。
• .feature的直接父级.feature-wrapper未设置高度，你给.feature加的height:100%找不到有效高度参照，自然不生效。

具体修复步骤 #

1. 调整行的对齐规则

把包含feature的.row上的align-content-between替换为align-items-stretch（或者直接删除该类，因为Bootstrap的.row默认就是align-items-stretch，会让列自动填满行高）。

2. 让feature-wrapper占满父级高度

给每个.feature-wrapper添加Bootstrap的h-100类，或者在CSS里给.feature-wrapper设置height:100%，这样子元素.feature的height:100%就能继承到父级高度。

修改后的完整代码 #

CSS部分（仅调整需要修改的样式）

.feature-wrapper {
  height: 100%; /* 等价于Bootstrap的h-100类 */
}

.feature {
  background-color: #f0f8ff47;
  border-radius: 25px;
  padding: 20px;
  height: 100%;
}

/* 保留你原有的其他CSS样式 */
#hr-1 {
  width: 100px;
  margin-left: 20%;
}

#features {
  background-color: #f0f8ff67;
  border-radius: 50px;
  padding: 50px 20px;
}

#cont2 {
  border-right: 2px solid #000;
}

.feature:hover {
  background-color: #f0f8ff87;
}

.feature>img {
  margin-bottom: 1rem;
}

HTML部分（修改row和feature-wrapper）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container-fluid" id="features">
  <div class="row">
    <div class="col-md-4 px-4 textw" id="cont2">
      <h3>What We Develop</h3>
      <hr id="hr-1">
      <p>Looking for a web development agency to bring your vision to life? We specialize in creating exceptional websites and applications tailored to your needs. Our experienced team ensures user-friendly, secure, and scalable results. With a proven track
        record, we'll transform your web application dreams into reality. Contact us now and let's achieve your online goals together.</p>
    </div>
    <div class="col-md-8">
      <div class="container-fluid">
        <!-- 替换align-content-between为align-items-stretch -->
        <div class="row align-items-stretch">
          <div class="col-xxl-3 col-xl-4 col-lg-6">
            <!-- 添加h-100类让wrapper占满列高度 -->
            <div class="feature-wrapper m-1 h-100">
              <div class="feature">
                <img src="./images/layers.png" alt="layers icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">Custom Web Application Development</h3>
                <p>Our agency offers bespoke web application development services to cater to your specific business requirements. Whether you need a customer management system, inventory tracking solution, or a booking platform, we have you covered.</p>
              </div>
            </div>
          </div>
          <div class="col-xxl-3 col-xl-4 col-lg-6">
            <div class="feature-wrapper m-1 h-100">
              <div class="feature">
                <img src="./images/online-shop.png" alt="shopping icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">E-commerce Solutions</h3>
                <p>We specialize in building robust and user-friendly e-commerce websites that enable seamless online shopping experiences for your customers. From product catalog management to secure payment gateways, we ensure a secure and efficient online
                  selling platform.</p>
              </div>
            </div>
          </div>
          <div class="col-xxl-3 col-xl-4 col-lg-6">
            <div class="feature-wrapper m-1 h-100">
              <div class="feature">
                <img src="./images/pencil.png" alt="shopping icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">Content Management Systems (CMS)</h3>
                <p>Our agency develops powerful CMS platforms that empower you to easily manage and update your website's content. With intuitive interfaces and flexible functionalities, you can effortlessly create and publish engaging content.</p>
              </div>
            </div>
          </div>
          <div class="col-xxl-3 col-xl-4 col-lg-6">
            <div class="feature-wrapper m-1 h-100">
              <div class="feature">
                <img src="./images/message.png" alt="shopping icon" style="width: 50px;">
                <h3 class="fs-4 text-body-emphasis">Responsive Web Design</h3>
                <p>We prioritize responsive web design, ensuring your website looks great and functions flawlessly across all devices, including desktops, tablets, and smartphones. This approach guarantees a consistent user experience and maximizes your
                  reach to diverse audiences.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

额外说明 #

align-items-stretch会强制同一行的所有列高度一致，再配合.feature-wrapper和.feature都设置100%高度，就能实现所有feature盒子高度统一的效果。如果不想依赖Bootstrap的h-100类，直接在CSS里给.feature-wrapper写height:100%也能达到同样效果。

内容的提问来源于stack exchange，提问作者HaggisBonBon