html - 图标 div 未显示在同一行上

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 中，“col-md-4”意味着，在“中等”宽度的视口(viewport)(或更大)上，该元素将跨越总共 12 列中的 4 列(十二只是存在的任意列数在 Bootstrap 中)。因此，一行中只能包含 3 个具有该类名的元素。

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