html - Set "margin-bottom" to "0" for all elements on the last row (responsive layout) -
i creating responsive template using bootstrap. have multiple items located in row, depending on resolution there can different amount of items in 1 row , different amount of rows accordingly.
<div class="row"> <div class="col-xs-6 col-sm-4 col-md-3"> <div class="item"> ... </div> </div> <div class="col-xs-6 col-sm-4 col-md-3"> <div class="item"> ... </div> </div> <div class="col-xs-6 col-sm-4 col-md-3"> <div class="item"> ... </div> </div> <div class="col-xs-6 col-sm-4 col-md-3"> <div class="item"> ... </div> </div> ... </div> <!-- / .row -->
every item has bottom margin, don't stick vertically:
.item { margin-bottom: 20px; }
is there way set bottom margin "0" items of the last row? (taken don't know items in last row on different resolutions).
ps: don't confused .row
container. doesn't mean divs inside single row. wrapper .col- containers.
jsfiddle: http://jsfiddle.net/m668fska/
use media queries match bootstrap's,
/* large desktop */ @media (min-width: 768px) { div.row>div.col-xs-6.col-sm-4.col-md-3:nth-last-child(-n+4)>div.item{ margin-bottom:0; } }
then ditto following, except using nth-last-child(-n+3)
, nth-last-child(-n+2)
instead:
/* landscape phone portrait tablet */ @media (max-width: 767px) { ... } /* landscape phones , down */ @media (max-width: 480px) { ... }
Comments
Post a Comment