我已經使用Bootstrap在html中創建了特性。我正試圖統一每個箱子的高度。 方框截圖
#hr-1 {
width: 100px;
margin-left: 20%;
}
#features {
background-color: #f0f8ff67;
border-radius: 50px;
padding: 50px 20px;
}
#cont2 {
border-right: 2px solid #000;
}
.feature {
background-color: #f0f8ff47;
border-radius: 25px;
padding: 20px;
height: 100%;
}
.feature:hover {
background-color: #f0f8ff87;
}
.feature>img {
margin-bottom: 1rem;
}<link 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">
<div class="row align-content-between">
<div class="col-xxl-3 col-xl-4 col-lg-6">
<div class="feature-wrapper m-1">
<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">
<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">
<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">
<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># # #我認為你需要對你的HTML做一些小改動:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<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">
<div class="row align-content-between">
<div class="col-xxl-3 col-xl-4 col-lg-6 d-flex align-items-stretch">
<div class="feature-wrapper m-1 h-100 p-1">
<div class="feature h-100">
<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 d-flex align-items-stretch">
<div class="feature-wrapper m-1 h-100 p-1" >
<div class="feature h-100">
<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 d-flex align-items-stretch">
<div class="feature-wrapper m-1 h-100 p-1">
<div class="feature h-100">
<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 d-flex align-items-stretch">
<div class="feature-wrapper m-1 h-100 p-1">
<div class="feature h-100">
<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>.com)我只是在容器上添加了align-items-stretch。它允許每個容器占據其父容器的高度(在我們的例子中是行)
隨后，我將h-100添加到容器的每個子div中，這樣它們也占據了各自父div的整個高度。
我們還需要一個填充，以p-1結束整個事情
全部代碼都在我的codepen上
# # #很難說你沒有像在任何在線編碼編輯器中那樣提供它。
<link rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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">
<div class="row align-content-between">
<div class="col-6 col-md-3">
<div class="feature-wrapper m-1">
<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-6 col-md-3">
<div class="feature-wrapper m-1">
<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-6 col-md-3">
<div class="feature-wrapper m-1">
<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-6 col-md-3">
<div class="feature-wrapper m-1">
<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># # #向容器流體元素添加了h-100類。該類將容器的高度設置為100%，以便子元素可以繼承它。
將d-flex flex-column類添加到功能分區中。這會將flexbox應用到特征框，并將其方向設置為列，從而允許子元素垂直拉伸。
在行中添加了align-items-stretch類。該類確保列垂直伸展，以匹配最高列的高度。
通過這些修改，功能框應該在所有列中具有統一的高度。您可以根據需要調整樣式并添加附加功能。
<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 h-100">
<div class="row align-items-stretch">
<div class="col-xxl-3 col-xl-4 col-lg-6">
<div class="feature-wrapper m-1">
<div class="feature d-flex flex-column">
<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>
<!-- Add the remaining feature columns with the same structure -->
</div>
</div>
</div>
</div>
</div>