bootstrap：如何从col-lg中删除填充？

Question

我有这个结构：

    <div class="container" id="gallery">
    <div class="row">
        <div class="col-lg-3 col-md-7">
            <img class="img-responsive center-block" src="#" alt="car1">
        </div> <!-- /.col-lg-3, /.col-md-7 -->
        <div class="col-lg-3 col-md-7">
            <img class="img-responsive center-block" src="#" alt="car1">
        </div> <!-- /.col-lg-3, /.col-md-7 -->
        <div class="col-lg-3 col-md-7">
            <img class="img-responsive center-block" src="#" alt="car1">
        </div> <!-- /.col-lg-3, /.col-md-7 -->
        <div class="col-lg-3 col-md-7">
            <img class="img-responsive center-block" src="#" alt="car1">
        </div> <!-- /.col-lg-3, /.col-md-7 -->
    </div><!-- /.row -->

一切都很好 - 图像居中，调整大小。但是有一个问题。我有一个很大的填充物？从左和右。看起来像是：

当我将“col-lg-3”更改为“col-lg-2”时，此填充较小，但是......我不希望在一行中显示6张图片。那么 - 我能做什么？我厌倦了这样的事情，但没有变化：

.row-no-padding {
[class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Answer 1

问题似乎在边缘，而不是填充。你能改变一下，看看它是否有效吗？

Answer 2

在img中添加新类（test）并放入内容

<img class="img-responsive center-block test" src="#" alt="car1">

   .test{
      width: 100%;
   }

Answer 3

这个空间是因为col-lg-3。它将屏幕(12 column grids)划分为相同大小的(4 column grid)，并且您的图片尺寸小于4 col grid。这就是为什么显示填充以克服图像覆盖色谱柱后留下的空间的原因。