三后如何包装一系列图标

Question

我已经下载了一个引导主题：

信息：http://startbootstrap.com/template-overviews/stylish-portfolio

演示：http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio

在“我们的服务”页面上，它显示了 4 个带有字体真棒图标的圆圈。我已经添加了另外 2 个圆圈和字体很棒的图标。但我只添加了 2...所以在页面上，它有点尴尬，一整行圆圈和图标，然后在其他圆圈/图标下方只有 2 个较小的线。我希望它们在每行上是 3并居中。

我查看了 css 代码，但找不到任何东西。这是代码

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

/* Callout */

.callout {
    display: table;
    width: 100%;
    height: 400px;
    color: #fff;
    background: url(../img/callout.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}





<!-- Services -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<section id="services" class="services bg-primary">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-10 col-lg-offset-1">
                <h2>Our Services</h2>
                <hr class="small">
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="service-item">
                            <span class="fa-stack fa-4x">
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-cloud fa-stack-1x text-primary"></i>
                        </span>
                            <h4>
                                <strong>Service Name</strong>
                            </h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <a href="#" class="btn btn-light">Learn More</a>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="service-item">
                            <span class="fa-stack fa-4x">
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-compass fa-stack-1x text-primary"></i>
                        </span>
                            <h4>
                                <strong>Service Name</strong>
                            </h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <a href="#" class="btn btn-light">Learn More</a>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="service-item">
                            <span class="fa-stack fa-4x">
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-flask fa-stack-1x text-primary"></i>
                        </span>
                            <h4>
                                <strong>Service Name</strong>
                            </h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <a href="#" class="btn btn-light">Learn More</a>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="service-item">
                            <span class="fa-stack fa-4x">
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-shield fa-stack-1x text-primary"></i>
                        </span>
                            <h4>
                                <strong>Service Name</strong>
                            </h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            <a href="#" class="btn btn-light">Learn More</a>
                        </div>
                    </div>
                </div>
                <!-- /.row (nested) -->
            </div>
            <!-- /.col-lg-10 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

Answer 1

如果您检查文档，您会看到这个常见的 Bootstrap 标记结构：

<div class="row">
    <div class="col-md-3 col-sm-6">
        ...
    </div>
    <div class="col-md-3 col-sm-6">
        ...
    </div>
    <div class="col-md-3 col-sm-6">
        ...
    </div>
    <div class="col-md-3 col-sm-6">
        ...
    </div>
</div>

这会导致图标在移动设备上排列为 2 行，在较大的屏幕尺寸下排列为 4 行。您需要根据 Bootstrap 网格文档将模板文件修改为：

<div class="row">
    <div class="col-xs-4">
        ...
    </div>
    <div class="col-xs-4">
        ...
    </div>
    <div class="col-xs-4">
        ...
    </div>
    <div class="col-xs-4">
        ...
    </div>
    <div class="col-xs-4">
        ...
    </div>
    <div class="col-xs-4">
        ...
    </div>
</div>

这将导致每个图标部分占据行宽的三分之一，然后它们会换行。

您也可以使用 CSS 覆盖来击败它，但我不推荐它。

Answer 2

列加起来为 12，因此 md-3 处有 4 列，而 md-4 处需要 6 列。