Twitter Bootstrap - Position d'un problème avec la ligne fluide

Je suis actuellement en train de construire un site web en utilisant Twitter bootstrap (qui est étonnant!).
J'ai eu la mise en page à l'aide de:

<div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
</div>

Qui fonctionne très bien, j'ai 2 divs par ligne de coeur, et nous n'avons pas d'inclure un compteur dans notre boucle pour se débarrasser de la marge. C'était parfait! Mais nous avons décidé de changer notre esprit sur le fait d'avoir une disposition fixe, donc je suis passé de la .ligne pour .la ligne fluide. Et c'est quand le problème vient.

Je sais avoir quelque chose comme ceci:

<div class="row-fluid">
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
</div>

Et la div avec .span6 bien fonctionner pour la première ligne, mais ensuite la marge de gauche sur la .span6 font leur apparition à partir de la deuxième ligne, par conséquent, la mise en page est bien ...pas bien.

Je suis surpris qu'il fonctionne étonnante pour disposition fixe, mais pas de la ligne fluide. Est-il une solution pour cela? J'ai utilisé ce sur tout mon site, afin d'avoir à ajouter des compteurs pour tous...trop de travail.

Voici JS Fiddle:
http://jsfiddle.net/denislexic/uAs6k/3/

Toute aide appréciée, merci.

jsbin.com ou jsfiddle.net exemple serait une amélioration pour vous aider!
Merci, j'ai ajouté: jsfiddle.net/denislexic/uAs6k/3
Une version de travail jsfiddle.net/uAs6k/4 . Un margin-left:0; et un clair a été ajouté.
Merci, mais j'ai encore besoin de la marge entre les 2 travées.

OriginalL'auteur denislexic | 2012-05-06

  1. 7

    Si vous connaissez le numéro de l'étendue d'échelle pour chaque ligne, vous pouvez utiliser une expression comme ceci:

    .row-fluid [class*="span"]:nth-child(3n+1) {
   margin-left: 0;
}

    par exemple: si vous avez 3 travées pour chaque ligne, l'expression ci-dessus sera supprime la marge de la première travée de chaque ligne. Et le ci-dessous on enlève le margin-right pour le dernier élément de chaque ligne:

    .row-fluid [class*="span"]:nth-child(3n+3) {
    margin-right: 0;
}

    OriginalL'auteur

  2. 32

    Vos 2 exemples ont 4 <div class="span6"></div> au sein d'une pleine largeur de la 'ligne'... en ajoutant jusqu'à '24', ou deux fois la largeur signifiait pour une "ligne" ou "row-fluid", basée sur la grille de 12 colonnes de l'installation. Vous êtes essentiellement en la création d'abandon de flotteurs quand ils sont trop nombreux pour tenir dans la ligne parent de largeur.
    (C'est aussi pourquoi il semble que "margin-left:0" n'est pas appliqué à votre 3ème de "span6", qui semble comme c'est le premier "span6" de la 2e rangée.)

    Un défaut d'/fixe 'row', la colonne imbriquée "span" * " + 'décalage*'s devra être inférieure ou égale à celle de son parent colonne" durée*", OU si c'est une première au niveau de la ligne, puis 12, parce que le flottait 'span*' largeurs en pixels.

    Dans un flexible/liquide 'row-fluid', la largeur des colonnes sont définies en pourcentage, de sorte que chaque rangée et imbriquées ligne peut avoir imbriqué colonne "durée" * " et "offset*s'ajouter jusqu'à 12, à chaque fois.
    http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

    Cela devrait résoudre votre problème avec le "row-fluid" de l'installation.
    http://jsfiddle.net/csabatino/uAs6k/9/

    <h1>NOW this is working.</h1>
<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
<div class="row-fluid">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>


<h1>Default fixed 'row' is working, too.</h1>
<div class="row">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
<div class="row">
    <div class="span6">Content</div>
    <div class="span6">Content</div>
</div>
    Quelqu'un aurait-il une suggestion sur la façon de le résoudre lors de l'utilisation sur LI éléments avec la durée?

    OriginalL'auteur

  3. 3
    .row-fluid [class*="span"]:first-child {
margin-left: 0;
}

    Il ne supprime marge pour le premier enfant, de sorte que vous aurez besoin d'ajouter une autre catégorie ou de modifier span6 avoir margin-left:0;

    Mais est-il une solution? Pourquoi ne pas faire comme .ligne? Merci.
    le fluide css est différente de la fixe. C'est juste la façon dont ils l'ont fait. Sur la ligne 543 de l'amorçage.css, vous pouvez modifier .la ligne fluide [class*="span"] pour avoir un margin-left:0;
    Avoir de la marge déjà spécifiée, assurez-vous que le liquide de la mise en page est l'utilisation de 100% de la fenêtre du navigateur.
    une meilleure solution est de les diviser en différentes lignes
    l'ajout de maring-left:0 à .la ligne fluide .span6 { a workfing pour moi !

    OriginalL'auteur

  4. 1

    Je l'ai résolu en mettant un div vide avec span12 au début, uggly dans le code, mais efficace dans l'interface graphique

    OriginalL'auteur

  5. 0

    Si l'application ne parvient pas compte des éléments et la diviser en lignes, en supprimant margin-left et l'ajout de padding-right a très bien fonctionné pour moi:

    .gal [class*="span"] {margin-left:0; padding-right:20px;}

    http://jsfiddle.net/uAs6k/116/

    OriginalL'auteur

  6. 0

    J'ai juste fait cette avec jQuery à la place:

    $(document).ready(function(){
    function doFluidFirstSpan() {
        var top = $('.thumbnails > li:first-child').position().top;
        $('.thumbnails > li').each(function(){
            if($(this).position().top > top) {
                $(this).addClass("alpha");
                top = $(this).position().top;   
            }
        }); 
    }

    doFluidFirstSpan();
}

    et le css:

    .alpha { margin-left: 0 !important; }
    naturellement, alors vous devez appeler la fonction :/

    OriginalL'auteur