1

当我在 ipad 横向视图上查看我的网站“服务”时，我的服务下降了一行。我检查了开发人员工具，可以看到如果我取消引导程序 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>
4

1 回答 1

2

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;
}
于 2016-09-11T18:26:51.193 回答