Question

当我查看我的网站＆＃34;服务＆＃34;在ipad横向视图中，我的服务正在下降一排。我检查了开发人员工具，可以看看我是否取消了33.3％的bootstrap，每项服务将获得50％。

但是当引导程序定义它时，我无法看到如何让每个人填充33.3％。我还定义了div类应该使用多少col。我查看了我的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 col不合适

1 个答案: