bootstrap 列不合适

Question

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

但是当 bootstrap 定义它时，我看不出如何让每个填充 33.3%。我还定义了 div class 应该使用多少列。我查看了我的 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;
}

bootstrap 列不合适

bootstrap col is not fitting

html

css

mautic