Question

我正在构建的着陆页上有4个图标，每个图标都在自己的div中。出于某种原因，不是将所有4保持在同一条线上并自动调整大小，而是将3保持在一条线上，而第4条始终在第2条线上，如下图所示。是什么导致这种情况发生在那个图标上？

以下是HTML：

<section id="services">
        <div class="container">
            <div class="row" id="services-positioning">
                <div class="col-md-4 service-content sc1">
                    <span><i class="fa fa-hdd-o"></i></span>
                    <h4>Get Inspired</h4>

                </div>
                <div class="col-md-4 service-content sc2">
                    <span><i class="fa fa-diamond"></i></span>
                    <h4>Get Rewarded</h4>

                </div>
                <div class="col-md-4 service-content sc3">
                    <span><i class="fa fa-envelope-o"></i></span>
                    <h4>Be Creative</h4>

                </div>
                <div class="col-md-4 service-content sc4">
                    <span><i class="fa fa-envelope-o"></i></span>
                    <h4>Stay Connected</h4>

                </div>
            </div>
        </div>
    </section>

相关CSS：

#services {
    padding: 100px 0;
}

.container {
    width: 100%;
    max-width: 400px;
}

#services2 .col-md-4 {
    margin-bottom: 50px;
}

.service-content {
    cursor: pointer;
}

/*
#services-positioning{
    display: inline-block;
}
*/

.service-content span {
    display: table;
    margin: 0px auto 25px;
    color: #3498db;
    text-align: center;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    position: relative;
    border: 2px solid #3498db;
    width: 100px;
    height: 100px;
    display: table;
    font-size: 35px;
    border-radius: 50%;
    padding-top: 22px;
}

.service-content:hover span {
    background: #3498db;
    color: #fff;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}

.service-content:hover i {
    transition: 0.3s;
    -webkit-transition: 0.3s;
}

.service-content h4 {
    font-size: 17px;
    text-align: center;
    font-weight: 700;
    margin: 0px 0px 10px;
    text-transform: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.service-content p {
    font-size: 14px;
    text-align: center;
    line-height: 22px;
    margin: 0 0 10px;
    color: #777;
    font-weight: 300;
    padding: 0 20px;
}

.service-content a {
    color: #3498DB;
    font-size: 14px;
    text-align: center;
    display: table;
    margin: 0 auto;
}

.service-content a i {
    font-size: 14px;
    margin-left: 5px;
}

.service-content a:hover {
    color: #000;
}

Answer 1

从col-md-4更改为col-md-3。在Bootstrap中，＆＃34; col-md-4＆＃34;意味着，在＆＃34;介质＆＃34; -width视口（或更大）上，该元素将跨越总共12个中的4列（十二个只是Bootstrap中存在的任意列数）。因此，只有3个具有该类名的项目可以放在一行中。

来自官方文档的a nice visual explanation of Bootstrap's grid system。

图标div未显示在同一行

1 个答案: