Bootstrap clearfix every 3 columns
I\'ve got a blade view (Laravel 5) that lists all products this way:
@foreach($products as $p)
-
Your columns are most likely of varying heights which is a common issue with grids like Bootstrap with regard to floats & clear. Bootstrap does have a utility to work with but it's not always a great choice. See Resets.
An alternative.
Since you have 2 different breakpoints that your columns are set at, col-lg-4 and col-sm-6 (col-md-6 isn't needed since it's equal to your small class of col-sm-6), you have to clear the columns at the appropriate breakpoints.
Make sure to be specific when implementing this so it does not affect any other part of the grid you may be using elsewhere. Add a generic class to each column or use something like the example below, etc.
One way to do this is to place the needed rules inside of media queries in conjunction with Pseudo Classes for the columns. Also see MDN nth-child.
Working Example:
@media (min-width: 1200px) {
.grid .col-lg-4:nth-child(3n+1) {
clear: left;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.grid .col-sm-6:nth-child(2n+1) {
clear: left;
}
}
ONE
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
TWO
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
THREE
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
FOUR
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
FIVE
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
加载中...
- 热议问题