文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使这些柱子固定高度？

问如何使这些柱子固定高度？
EN

Stack Overflow用户
提问于 2020-05-28 09:10:06
回答 1查看 49关注 0票数 0

我使用引导带4压缩了这个全宽度部分。在大屏幕上，它们看起来很好，但是当我缩小屏幕大小时，列的高度并不相等。我怎样才能使它们的高度相等，这样就不会影响一个比另一个内容更多的内容？

我看到的是：

​

我试图将100%的高度添加到服务-3盒包装类中。任何帮助都是非常感谢的。

​

代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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>

​

bootstrap-4
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-28 09:53:58

只要将这2条规则添加到您的CSS中，它就会解决这个问题。

代码语言：javascript
复制
  .services-3-box-wrapper {
     height: 100%;
  }
  div[class^="service-box"]{
    height: 100%;
  }

实际上，Flex的孩子会自动拥有相同的高度，但是对于内部的项目，你必须做到100%，而且你做的是对的，但是你必须确保你给背景颜色的div必须有100%的高度属性，以及它的所有上面的父母。检查一下这个工作

​

代码语言：javascript
复制
#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%;
}
代码语言：javascript
复制
<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>

​

举例说明。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62061011

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档