Twitter bootstrap 移除图像之间的空间并获取图像平铺

我尝试了不同的方法，但似乎不起作用。我还在学习bootstrap。我听说过要把排水沟移走，但我试着把它移走的时候，它还是不起作用。以下是我正在努力实现的目标：以下是我目前拥有的：

小提琴：

<div class="container" id="projects">
  <div class="row centered mt mb">
    <h1 style="font-family: 'Parisienne', cursive;  ">- Projects -</h1>

    <div class="col-lg-4 col-md-4 col-sm-4 gallery" >
      <a href="work.html"><img src="assets/img/portfolio/folio01.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery">
      <a href="work.html"><img src="assets/img/portfolio/folio02.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery">
      <a href="work.html"><img src="assets/img/portfolio/folio03.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery">
      <a href="work.html"><img src="assets/img/portfolio/folio04.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery">
      <a href="work.html"><img src="assets/img/portfolio/folio05.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery">
      <a href="work.html"><img src="assets/img/portfolio/folio06.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery" >
      <a href="work.html"><img src="assets/img/portfolio/folio01.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery">
      <a href="work.html"><img src="assets/img/portfolio/folio02.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery">
      <a href="work.html"><img src="assets/img/portfolio/folio03.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery">
      <a href="work.html"><img src="assets/img/portfolio/folio04.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery">
      <a href="work.html"><img src="assets/img/portfolio/folio05.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 gallery">
      <a href="work.html"><img src="assets/img/portfolio/folio06.png" class="img-responsive"></a>
    </div>
  </div><! --/row -->
</div><! --/container -->

-计划-

步骤1：删除thumb类底部的边距

.thumb{
    margin-bottom:0px;
}

步骤2：覆盖引导样式

col-lg-3, col-md-4, col-xs-6{
   padding-right:0px;
   padding-bottom:0px;
}

步骤3：带有类缩略图的锚定标记的底部边距为20px，因此将其删除

.thumbnail{
    margin-bottom:0px;
}

在那之后它会像这样

---

希望这有帮助……

您只需删除应用于列的填充

将该类添加到

行

分区。请参阅

*请记住，只有在所有图像大小相同的情况下，这才会真正起到预期的作用，否则，应用于网格内创建的列的浮点值会出现问题

工作示例：使用FullPage打开

html，
身体{
宽度：100%；
身高：100%；
}
.no排水沟>[class*='col-']{
右边填充：0；
左侧填充：0；
}
@介质（最大宽度：767px）{
.画廊图片{
保证金：自动；
}
}

请在一篇文章中发布您的代码（HTML/CSS/JS）的最小工作示例。见和。

.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}