Bootstrap 3: Entfernen unteren Rand von den Spalten am unteren Rand der Zeile

Question

Ich habe ein Raster mit mehreren Spalten. Alle Spalten befinden sich in einer Zeile und die Anzahl der Spalten kann variieren.

Da ich einen vertikalen Abstand zwischen den Spalten brauchte, habe ich den Rand unten auf den Spalten hinzugefügt.

Allerdings möchte ich den gleichen Platz zwischen Wrapper und den Spalten so muss ich Marge-unten auf den letzten paar Spalten in der Zeile entfernen.

See sample here: https://jsfiddle.net/aucovic/rhhyu6h2/6/ 

Wie würde ich den unteren Rand der letzten Spalten dynamisch entfernen?

<style> 
.wrapper { 
    background:#000; 
    padding:10px; 
} 

.box { 
    background: #fff; 
} 

.mb { 
    margin-bottom:10px; 
} 
</style> 


<div class="wrapper"> 
    <div class="row"> 
    <div class="col-md-4 col-xs-6 mb"> 
     <div class="box"> 
     Box 1 
     </div> 
    </div> 
    <div class="col-md-4 col-xs-6 mb"> 
     <div class="box"> 
     Box 2 
     </div> 
    </div> 
    <div class="col-md-4 col-xs-6 mb"> 
     <div class="box"> 
     Box 3 
     </div> 
    </div> 
    <div class="col-md-4 col-xs-6 mb"> 
     <div class="box"> 
     Box 4 
     </div> 
    </div> 
    <div class="col-md-4 col-xs-6 mb"> 
     <div class="box"> 
     Box 5 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Nun, falls Sie der Wrapper wollen etwas Padding haben, ein Super-Quick-Fix wäre die untere Polsterung gleich (Anfang Polsterung - Marge Boden der Spalten) zu sein. In Ihrem Beispiel wird es nur padding-bottom: 0 für Ihren Wrapper sein. Dies ist definitiv keine ultimative Lösung, aber es ist sehr einfach und funktioniert im beschriebenen Fall.

Hier ist eine Geige: https://jsfiddle.net/kLr8sog6/

Answer 2

@Antonio, um den unteren Rand zu entfernen dynamisch musst du jQuery/JavaScript verwenden. Fügen Sie bei einem geeigneten Ereignis die Klasse hinzu, die margin-bottom: 0px hat.

Beispiel:

CSS-Code:

.removeBottomPadding{ 
margin-bottom:0px !important; 
} 

JavaScript-Code: [Stellen Sie sicher, eine ID an den Wrapper hinzufügen]

window.onload = function() { 
document.getElementById('wrapper').className = 'removeBottomPadding'; 
}; 

ODER

jQuery-Code:

$(function() { 
$('.wrapper').addClass('removeBottomPadding'); 
}); 

Das ist alles.

Viel Glück & hoffe, dass hilft.

Answer 3

Sie die Anzahl der Spalten, n-te Kind Unter der Annahme, Selektoren helfen könnte nicht ändern:

//mobile and tablet view 
@media(max-width:992px) { 
    .mb:nth-last-child(-n+2) { 
     margin-bottom:0px; 
    } 
} 
//wider views 
@media(min-width:993px) { 
    .mb:nth-last-child(-n+3) { 
     margin-bottom:0px; 
    } 
} 

EDIT: Ihr diese in Wirkung zu zeigen, fummelte Aktualisiert: Wieder https://jsfiddle.net/rhhyu6h2/8/

, nur für diesen speziellen Layout. Für Layouts mit variablen Spalten müssen Sie in einem Wrapper oder über JS auflösen.

EDIT2: https://jsfiddle.net/rhhyu6h2/9/
erfordert Dies keine neue HTML: von Ihren anderen Kommentaren lesen, Sie eine Wrapper Einstellung Klasse auf selektive Zeilen verwenden könnten.