Bootstrap：天沟空间问题

Question

我正在使用Bootstrap sb管理模板。我试图连续添加3个cols，但问题是这些盒子周围没有空间并且它们被合并在一起。我尝试通过cdn链接更改bootsrap文件，逐个删除所有的css文件但是没有用。这是我的html结构（Codeigniter视图）

 <div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header"> Services </h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-12 service-block">
            <img src="<?php echo base_url()?>assets/images/service-1.png" class="img-responsive  center-block">
            <h3 class="text-center">Body Works</h>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-12 service-block">
            <img src="<?php echo base_url()?>assets/images/service-1.png" class="img-responsive  center-block">
            <h3 class="text-center">Body Works</h>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-12 service-block">
            <img src="<?php echo base_url()?>assets/images/service-1.png" class="img-responsive  center-block">
            <h3 class="text-center">Body Works</h>
        </div>

    </div>
    <!-- /.row -->
</div>

这是这些服务块的唯一css

.service-block{
        background: #EDEDED;
        height: 220px;
     }
    .service-block img{
        margin-top: 15%;
        margin-bottom: 9px;
    } 

这是我得到的输出

有人可以帮助我解决这个问题吗

Answer 1

一行中有3列，但每列在网格中保留3个空格，即9个。但是bootstrap要求您在网格中填充12个空格。所以使用：
<div class="col-md-4 col-sm-4 col-xs-12 service-block">