Question

我已经下载了一个bootstrap主题：

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

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

在“我们的服务”页面上，它显示了4个带有字体真棒图标的圆圈。我已经添加了另外两个圆圈和字体真棒图标。但我只添加了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

列在md-3中最多可添加12列，因此需要6列md-4。

Answer 2

如果您检查文档，您将看到这个常见的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覆盖来提交它，但我不推荐它。

如何在三个之后包装一系列图标

2 个答案: