Fix Bootstrap Rembourrage Sur Des Colonnes Imbriquées

Bootstrap 3, une 15px à gauche et à droite de rembourrage sur les colonnes.

C'est me causer des ennuis parce que ma mise en page a beaucoup de colonnes imbriquées:

<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-12">
    <div class="col-md-6">
        <div class="col-md-12"></div>
        <div class="col-md-12"></div>
    </div>
    <div class="col-md-6"></div>
</div>

Voir Tripoter.

Je n'ai pas besoin d'enlever le rembourrage parce que j'ai besoin de la séparation entre les éléments.

Le résultat que je suis après, visuellement, c'est ceci: http://jsfiddle.net/Aeup8/8/

Ma première approche a été de définir:

[class^='col-'] {
    padding:0;
}
[class^='col-'] + [class^='col-'] {
    padding-left: 15px;
}

Cependant, ce ne sera pas de fixer des colonnes qui s'enroulent sur une deuxième ligne.

Voir Tripoter

Ma deuxième approche a été à l'aide de JavaScript: 

(function($) {
var $els = $('[class^="col-"');
//console.log($els);
var cols = {};
$els.each(function(i, col) {
var classes = $(col).attr('class').split(' ');
classes.forEach(function(str) {
var match = str.match(/col-(\w+)-(\d+)/);
if ( match ) {
//console.log($els.eq(i));
cols[match[1]] = cols[match[1]] || {};
var current = cols[match[1]];
if ( match[2] == 12 ) {
current.ids = [];
current.sum = 0;
$els.eq(i).css({ padding: 0 });
return
}
current.ids = current.ids || [];
current.sum = current.sum || 0;
current.sum += ( +match[2] );
current.ids.push(i);
if (current.sum == 12) {
//console.log(current);
current.ids.forEach(function(id) {
$els.eq(id).css({ 'padding': 0, 'padding-right': '15px' });
if (id == i) $els.eq(id).css({ 'padding': 0, 'padding-left': '15px' });
});
current.ids = [];
current.sum = 0;
}
}
});
});
})(jQuery);

Voir Tripoter

Mais il a des problèmes:

  • Il n'a pas de parcourir le DOM dans l'ordre souhaité, afin de ne pas faire imbriquée ceux le bien.
  • Je ne veux pas même de corriger cela car il semble que c'est une très mauvaise solution (ce serait le cas à chaque fois la taille de la fenêtre de modification)

Que dois-je faire?

InformationsquelleAutor Alain Jacomet Forte | 2014-03-30
  1. 44

    Vous pouvez contrer la copie de remplissage lorsque l'imbrication des colonnes par emballage de chaque couche dans son propre .row:

    <div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>

    L'écart entre les 2 colonnes primaires demeurent, mais l'imbrication de ne pas continuer à tiret supplémentaire: http://jsfiddle.net/5uqmE/.

    Actuellement, ils ont à accomplir cette par appliquer un négatif margin qui s'oppose à l'extérieur padding:

    //Row
//
//Rows contain and clear the floats of your columns.
.row {
.make-row();
}
    //Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
margin-left:  (@gutter / -2);
margin-right: (@gutter / -2);
&:extend(.clearfix all);
}
    • Je suis conscient de cela, mais c'est vraiment très compliqué de mise en page générée à partir de WP widgets qui changent de positions sur différentes tailles d'écran, et de faire ce changement est en fait très difficile. Il y a un moyen de le faire sans l'aide de l' .ligne wrappers!, mais en tout cas, merci pour la réponse.
    • Jacomet Forte Si la complexité de cette mise en page, pourquoi êtes-vous à l'aide de Bootstrap en premier lieu? Les responsables de votre code devrait s'appuyer sur Bootrstap mise en page, plutôt que de substituée personnalisé de la grille. C'est une mauvaise pratique pour remplacer le comportement de la structure.
    InformationsquelleAutor Jonathan Lonowski
  2. 10

    Sur votre récipient

    .row  .row {
margin: 0px -15px;
}
    • Parfait et propre solution, je vous remercie!
    • Auriez-vous l'esprit ellaborate votre réponse un peu plus?
    InformationsquelleAutor Ken Wheeler
  3. -1

    Un simple css en fonction de la solution peut être la création de classes personnalisées et de les appliquer à col-* pour la compensation, les rembourrages intérieurs divs ou lorsque vous ne voulez pas de rembourrage.

    <div class="col-md-6 mmLR15"></div>
<div class="col-md-6 mM15"></div>
<div class="col-md-12 mM15">
<div class="row">
<div class="col-md-6 mmR15">
<div class="col-md-12 mm15"></div>
<div class="col-md-12 mm15"></div>
</div><!-- col-md-6 -->
<div class="col-md-6 mmL15"></div>
</div><!-- row -->
</div><!-- col-md-12 -->

    Maintenant pour mmLR15, mmR15, mmL15 est d'effacer le fichier de bootstrap colonnes rembourrage en cas de besoin. Ci-dessous, ont écrit les classes de la déclaration pour vous aider à comprendre mon point de vue clairement.

    .mmLR15 {
margin: 0px -15px;
}
.mmR15 {
margin-right: -15px;
}
.mmL15 {
margin-left: -15px;
}

    Cela ne claire de bootstrap classes sur les div que vous ne voulez pas. Inclure la classe en cas de besoin. Vous pouvez créer un fichier séparé et après bootstrap de sorte que votre code est plus propre. mmR15 & mmL15 sont uniquement pour les div en ligne comme ligne efface les marges gauche et droite.

    Pour les médias des points de rupture où le bootstrap rend les colonnes de 100%, vous pouvez les remettre en fonction ur besoin ou devrais-je dire sur vous mise en page. Espérons que cela vous aide.

    InformationsquelleAutor Fayaz