我如何关闭行之间的gab
问题描述：
我有六个块。我将顶部和底部结合在一起，现在存在差距。无论如何移动这一排没有破坏任何东西？我想知道如何解决与bootstrap这个问题。 我如何关闭行之间的gab
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="" crossorigin="anonymous">
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-4">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/400x450">ss
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
答
缺口来自引导行上的填充，创建一个类以删除填充并将其添加到每个行中。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="" crossorigin="anonymous">
<div class='col-lg-8'>
<div class='row'>
<div class="col-lg-6 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-6 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-6 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-6 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/400x450">ss
</a>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
答
注：此答案被张贴之前OP改变了他的问题的标题....
保持答案简单，你可以构建页面类似以下内容：
<div>
<div id="col1"></div>
<div id="col2"></div>
</div>
<div id="tallBlock">
</div>
<div>
<div id="col3"></div>
<div id="col4"></div>
</div>
如果您在顶部和底部的div上使用列数，那么它们将被分成2列。您应该手动设置col div上的高度，以确保它们在未发布时不会尝试流入第二列。
只是一些指导，你应该避免“ ”实在没有必要做，但不推荐。使用CSS进行演示。 – mayersdesign
你应该避免改变问题的标题。如果出现新问题，您可以通过评论或实际文章的编辑来提问。 – Tyler
我根据建议对设计进行了更改 - 只是我更改标题的原因，以便更好地适应更新的内容 – Vzupo