bootstrap col 不合适

Question

当我在 ipad 横向视图中查看我的网站“服务”时，我的服务下降了一行。我检查了开发者工具，可以看到如果我取消bootstrap 33.3 %，每个服务将获得50%。

但是当引导程序定义它时，我看不出如何让每个填充 33.3%。我还定义了 div 类应该使用多少列。我查看了我的 CSS，我没有任何填充、边距等应该导致这种情况。

<!-- begin services section -->
<section class="services">
    <div class="container">
        <div class="row">

            <div class="col-xs-12 col-sm-6 col-md-4">
                <div class="service small">
                    <i class="fa fa-paper-plane-o"></i>
                    <h3>AutoPilotHQ</h3>
                    <p>
                        I startet to have quite some experience building quality leads through journeys and landingpages. I have made scripts that can be integrated with several platforms.
                    </p>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
                <div class="service small">
                    <i class="fa fa-tablet"></i>
                    <h3>Mautic</h3>
                    <p>
                        I like the idea about open source marketing automation. I am currently working on different functions to generate and build more qulity leads. 
                    </p>
                </div>
            </div>
         </div>
    </div>
</section>

Answer 1

CSS 可能很棘手。

服务<i class="fa fa-paper-plane-o"></i> 的图标设置为float: left;，它会阻止布局。

添加此规则以修复它：

.service.small:after {
    content: " ";
    clear: both;
    display: table;
}

禁用以下 CSS 规则也会修复您的布局（我不知道为什么）：

.services .service {
    margin-bottom: 30px;
}