删除图像之间的空间并获取图像瓷砖

我尝试了不同的事情，但它似乎不起作用。我仍然在学习引导。我听说有关清除排水沟的问题，但当我尝试时却没有奏效。这是我想实现：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 -->

来源

2016-12-23 Lee

你在[片段]代码（HTML/CSS/JS）的请发表**最小工作示例**（ https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。参见[mcve]和[问]。 – vanburen

步骤1：删除拇指类

.thumb{ 
    margin-bottom:0px; 
}

步骤的下边距2：覆盖引导样式

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

步骤3：带班的缩略图锚标记具有20像素的边距，因此将其删除

.thumbnail{ 
    margin-bottom:0px; 
}

之后，它看起来像这样 output

希望这有助于....

来源

2016-12-23 19:09:29

你只必须删除应用于列的填充。

将此类添加到您的row格。见Attribute Selectors。

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

*请记住，这只会真正的预期，如果所有的图像的大小相同的工作，否则你必须与适用于创建除其他外网格内的差距列浮动的问题。

工作实例：打开与整页

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>

来源

2016-12-23 22:44:36 vanburen

删除图像之间的空间并获取图像瓷砖

回答

相关问题