Bootstrap 3: Supprimer la marge inférieure des colonnes au bas de la rangée

J'ai une grille avec plusieurs colonnes. Toutes les colonnes sont dans une rangée et le nombre de colonnes peut varier.Bootstrap 3: Supprimer la marge inférieure des colonnes au bas de la rangée

Étant donné que j'avais besoin d'un espace vertical entre les colonnes, j'ai ajouté margin-bottom sur les colonnes.

Cependant, je veux l'espace égal entre l'emballage et les colonnes de sorte que j'ai besoin de supprimer margin-bottom sur les dernières colonnes de la ligne.

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

Comment supprimer dynamiquement la marge inférieure sur ces dernières colonnes?

<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>

Source

2016-03-23 Antonio

S'il vous plaît ajouter le code directement dans votre question. – Wavemaster

Pourquoi ne pas ajouter la marge aller la 'box' et égaliser avec le padding' wrapper': http: //www.bootply.com/gAVN0Qi3HT – ZimSystem

Eh bien, si vous voulez l'emballage d'avoir un peu de rembourrage, un super quick-fix serait de fixer le rembourrage inférieur à égal (remplissage initial - fond de marge de colonnes). Sur votre exemple, ça va être padding-bottom: 0 pour votre wrapper. Ce n'est certainement pas un correctif ultime, mais il est super simple et fonctionne dans le cas décrit.

Voici un violon: https://jsfiddle.net/kLr8sog6/

Source

2016-03-23 10:44:08

Thx Gleb, c'est ce que j'ai déjà fait, mais je ne suis pas content de cette solution car dans certains cas j'ai besoin de ce rembourrage en bas:/ – Antonio

ok, alors vous pouvez donner un remplissage au conteneur colonne et négatif marge à la ligne, comme ici: https://jsfiddle.net/glebkost/kLr8sog6/2/ –

Besoin de cette marge à la ligne aussi:/ – Antonio

@Antonio, afin d'éliminer la marge en bas tu dois utiliser dynamiquement jQuery/JavaScript. Sur l'événement approprié, ajoutez la classe qui a margin-bottom: 0px.

Exemple:

Code CSS:

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

code JavaScript: [Assurez-vous d'ajouter un identifiant à l'emballage]

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

code jQuery:

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

C'est tout.

Bonne chance & espérons que cela aide.

Source

2016-03-23 11:05:48 Dev

En supposant que vous ne modifiez pas le nombre de colonnes, sélecteurs d'enfants nième pourraient aider:

//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: Mise à jour votre tripoté pour montrer en vigueur: https://jsfiddle.net/rhhyu6h2/8/

Encore une fois, uniquement pour ce spécifique disposition. Pour les dispositions de colonnes variables, vous devez résoudre dans un wrapper ou via JS.

EDIT2: de lire vos autres commentaires, vous pouvez utiliser une classe d'ajustement wrapper sur les lignes sélectives: https://jsfiddle.net/rhhyu6h2/9/
Cela ne nécessite pas de nouveau HTML.

Source

2016-03-23 16:53:40 Lance

Bootstrap 3: Supprimer la marge inférieure des colonnes au bas de la rangée

Répondre

Questions connexes