CSS指导对Boostrap中的网格项进行对齐 [英] CSS Guidance on Aligning Grid Items in Boostrap
问题描述
我试图显示项目的网格，图片的高度和宽度都不同，细节可以是长或短，导致页面上的换行数不同。
I'm trying to display a grid of items and the pictures are all different heights and widths, and the details can be long or short causing differing numbers of line breaks across the page.
这是我想要的样子：
This is what I want it to look like:
这里是它的实际外观：
And here is what it actually looks like:
这里是我如何每个项目的HTML结构（注意，这整个事情包括在循环中，因为它标记网格）：
Here is how I've structured the HTML for each item (Note, this whole thing is included in the loop as it marks up the grid):
<div class='col-xs-6 col-sm-3 col-md-3 col-lg-3 text-center item'>
<div class='item-image'>
<a href='#' >Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
<img class='img-circle img-responsive img-center' src='#' />
</div>
<div class='item-details'>
<h3>Product Name
<small>$$price</small>
</h3>
<p class='detail'>Date Added</p>
<p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a></p>
</div>
</div>
正如你所看到的，我并不真正使用Bootstrap以外的东西，细节类只是字体大小。这是我的问题：
As you can see, I'm not really using anything other than Bootstrap, the details class is just font sizes. Here are my issues:
-
如果图片比其他图片宽，可能会缩短图片）我知道这是由于bootstrap的img响应，因为宽度由Bootstrap设置为自动。
If images are wider than others, it may make the image shorter (if the aspect ratios are different) and I know this is due to the img-responsive from Bootstrap, since the width is set by Bootstrap to auto.
t对整体行高有任何影响，但我不知道为什么。我想我假设行将根据其中最大的divs调整大小？我可以手动设置行，但我想保持响应，所以一旦你去移动断点，网格是2宽而不是4.
The Text below the box doesn't have any impact on the overall row height, but I don't know why. I guess I assumed that the row would resize based on the largest divs within it? I could set the rows manually, but I'm trying to keep it responsive so once you go to the mobile breakpoint the grid is 2-wide instead of 4.
我不知道要搜索什么，我似乎找不到任何关于这个问题的指导。
I'm not sure what to search for, I can't seem to find any guidance on this issue.
推荐答案
看起来你只需要清除应用于项目在右断点处的浮点，
It looks like you just need to clear the float that's applied to the item at the right breakpoint since you have items of varying sizes at multiple breakpoints.
请参阅 MDN Clear ，此处是内置的实用程序 Bootstrap3，但在你的循环中可能没有意义。
See MDN Clear and here are the built in utilities for Bootstrap3 but probably don't make sense inside of your loop.
请参阅示例Snippet。
See example Snippet.
@media (min-width: 768px) {
.item:nth-child(4n+1) {
clear: left;
}
}
@media (max-width: 767px) {
.item:nth-child(2n+1) {
clear: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class='col-xs-6 col-sm-3 text-center item'>
<div class='item-image'>
<a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
<img class='img-circle img-responsive img-center' src='http://placehold.it/350x150' />
</div>
<div class='item-details'>
<h3>Product Name
<small>$$price 1</small>
</h3>
<p class='detail'>Date Added</p>
<p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
</p>
</div>
</div>
<div class='col-xs-6 col-sm-3 text-center item'>
<div class='item-image'>
<a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
<img class='img-circle img-responsive img-center' src='http://placehold.it/350x250' />
</div>
<div class='item-details'>
<h3>Product Name
<small>$$price 2</small>
</h3>
<p class='detail'>Date Added</p>
<p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
</p>
</div>
</div>
<div class='col-xs-6 col-sm-3 text-center item'>
<div class='item-image'>
<a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
<img class='img-circle img-responsive img-center' src='http://placehold.it/350x350' />
</div>
<div class='item-details'>
<h3>Product Name
<small>$$price 3</small>
</h3>
<p class='detail'>Date Added</p>
<p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
</p>
</div>
</div>
<div class='col-xs-6 col-sm-3 text-center item'>
<div class='item-image'>
<a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
<img class='img-circle img-responsive img-center' src='http://placehold.it/350x250' />
</div>
<div class='item-details'>
<h3>Product Name
<small>$$price 4</small>
</h3>
<p class='detail'>Date Added</p>
<p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
</p>
</div>
</div>
<div class='col-xs-6 col-sm-3 text-center item'>
<div class='item-image'>
<a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
<img class='img-circle img-responsive img-center' src='http://placehold.it/350x350' />
</div>
<div class='item-details'>
<h3>Product Name
<small>$$price 5</small>
</h3>
<p class='detail'>Date Added</p>
<p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
</p>
</div>
</div>
<div class='col-xs-6 col-sm-3 text-center item'>
<div class='item-image'>
<a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
<img class='img-circle img-responsive img-center' src='http://placehold.it/350x250' />
</div>
<div class='item-details'>
<h3>Product Name
<small>$$price 6</small>
</h3>
<p class='detail'>Date Added</p>
<p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
</p>
</div>
</div>
<div class='col-xs-6 col-sm-3 text-center item'>
<div class='item-image'>
<a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
<img class='img-circle img-responsive img-center' src='http://placehold.it/350x450' />
</div>
<div class='item-details'>
<h3>Product Name
<small>$$price 7</small>
</h3>
<p class='detail'>Date Added</p>
<p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
</p>
</div>
</div>
<div class='col-xs-6 col-sm-3 text-center item'>
<div class='item-image'>
<a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
<img class='img-circle img-responsive img-center' src='http://placehold.it/450x250' />
</div>
<div class='item-details'>
<h3>Product Name
<small>$$price 8</small>
</h3>
<p class='detail'>Date Added</p>
<p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
</p>
</div>
</div>
<div class='col-xs-6 col-sm-3 text-center item'>
<div class='item-image'>
<a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
<img class='img-circle img-responsive img-center' src='http://placehold.it/250x450' />
</div>
<div class='item-details'>
<h3>Product Name
<small>$$price 9</small>
</h3>
<p class='detail'>Date Added</p>
<p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
</p>
</div>
</div>
</div>
</div>
这篇关于CSS指导对Boostrap中的网格项进行对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
