Fit divs tight - not in row layout

我想弄清楚如何让我的col-* divs在彼此旁边和下面“贴合”。我不是设计师，在我尝试解释我想要达到的目标的时候，对我一无所知。Fit divs tight - not in row layout

所以我有一个公平的想法是如何在引导程序中的整个网格系统的作品，这就是为什么我不认为我可以做我想做的事情没有一些奇怪的CSS。因此，基本上，如果我有6 col-sm-4div s（在普通的笔记本电脑屏幕上，全尺寸），我最终将在3行下面排成一行3.如果其中一个div第一行比第二行高，我将把剩下的四个div直接放在下面。

所以问题是这样的，我该如何摆脱那个“空白”，让行，以及行为不像行？我试过只有col-* divs，没有包装row和container div，但我仍然得到相同的结果。

感谢您的帮助！

来源

2016-05-31 iLikeBreakfast

你有没有考虑在列去除余量，所以绝对不会有空白？ – matmik

你可以通过摆脱他们的填充物来“紧贴”他们，例如... .col-sm-4 {padding：0px;} 为了让他们贴身地贴在彼此之上，取决于你的布局你需要弄清楚填充和/或边缘是在哪里造成的，并消除这些... .thumbnail {margin：0px！important;} 至于最后一个问题，也许你正在寻找嵌套行？ http://stackoverflow.com/questions/24659471/nested-rows-with-bootstrap-grid-system。 – kilkfoe

只需在一行中将3个引导程序div（每个div的2个元素）包装成'元素'...或者我错过了什么？

来源

2016-05-31 19:54:50 JoostS

这个问题已经以多种形式提出过很多次，并且有很多解决方案和YMMV。

一个解决方案是使用nth-child()选择器来清除行。添加媒体查询以根据需要定位各种屏幕分辨率。

.col-sm-4 { 
    border: 1px dashed skyblue; 
} 
/* After every 3rd .col-sm-4 we apply clear: left; */ 
.col-sm-4:nth-child(3n+1) { 
    clear: left; 
}

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4"> 
     Content 1 
     </div> 
     <div class="col-sm-4"> 
     Content 2<br> 
     Content 2<br> 
     Content 2 
     </div> 
     <div class="col-sm-4"> 
     Content 3 
     </div> 
     <div class="col-sm-4"> 
     Content 4 
     </div> 
     <div class="col-sm-4"> 
     Content 5 
     </div> 
     <div class="col-sm-4"> 
     Content 6 
     </div> 
     <div class="col-sm-4"> 
     Content 7 
     </div> 
    </div> 
</div>

演示JSFiddle。

来源

2016-05-31 19:57:56 hungerstar

最简单的方法是将所有东西都视为一行，并在列中添加每个项目。如果你不想要列之间的间距，只需删除默认的填充。

Fiddle

<div class="col-md-12"> 
    <div class="col-md-4"> 
     <div style="height:40px; background-color:black" ></div> 
     <div style="height:15px; background-color:orange"></div> 
    </div> 
    <div class="col-md-4"> 
     <div style="height:20px; background-color:red"></div> 
     <div style="height:55px; background-color:green"></div> 
    </div> 
    <div class="col-md-4"> 
     <div style="height:20px; background-color:yellow"></div> 
     <div style="height:11px; background-color:gray"></div> 
    </div> 
    </div>

来源

2016-05-31 19:58:06 Capo

Fit divs tight - not in row layout

回答

相关问题