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

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -