Question

我尝试了不同的东西，但它似乎不起作用。我还在学习bootstrap。我听说有关去除排水沟但是当我尝试时它没有用。以下是我要实现的目标：http://designova.net/identity/index02.html以下是我目前的情况：https://blackrockdigital.github.io/startbootstrap-thumbnail-gallery/#

小提琴：

<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 -->

Answer 1

第1步：删除拇指类的边距底部

.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;
}

之后它会是这样的 output

希望这会有所帮助......

Answer 2

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

将此课程添加到row div。请参阅Attribute Selectors。

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

*请记住，只有当你的所有图像大小相同时，这才能真正按预期工作，否则你会遇到一个问题，浮动应用于列中创建的间隙以及其他内容。

工作示例：使用FullPage打开

html,
body {
  width: 100%;
  height: 100%;
}
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
@media (max-width: 767px) {
  .gallery img {
    margin: auto;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row no-gutter">

    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/?gravity=center" class="img-responsive">
      </a>
    </div>
    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/" class="img-responsive">
      </a>
    </div>
    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/?gravity=east" class="img-responsive">
      </a>
    </div>
    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/?random" class="img-responsive">
      </a>
    </div>
    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/?gravity=west" class="img-responsive">
      </a>
    </div>
    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/" class="img-responsive">
      </a>
    </div>
    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/?random" class="img-responsive">
      </a>
    </div>
    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/?gravity=south" class="img-responsive">
      </a>
    </div>
    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/?random" class="img-responsive">
      </a>
    </div>
    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/?gravity=north" class="img-responsive">
      </a>
    </div>
    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/?random" class="img-responsive">
      </a>
    </div>
    <div class="col-sm-4 gallery">
      <a href="work.html">
        <img src="https://unsplash.it/400/300/?gravity=center" class="img-responsive">
      </a>
    </div>

  </div>
</div>

删除图像之间的空间并获取图像切片

2 个答案: