web-dev-qa-db-fra.com

Bootstrap colonnes de la grille qui se chevauchent

J'ai un problème avec la disposition de la grille de Bootstrap et le chevauchement des colonnes qu'il contient. Je ne suis pas sûr de la nature du problème, tout conseil serait très apprécié, merci. 

<div class="container">    

    <div class="row">
        <div class="col-md-6">
            <img src="content/one.png">
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6"><img src="content/two.png"></div>
                <div class="col-md-6"><img src="content/three.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/four.png"></div>
                <div class="col-md-6"><img src="content/five.png"></div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3"><img src="content/six.png"></div>
                <div class="col-md-9"><img src="content/seven.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/eight.png"></div>
                <div class="col-md-6"><img src="content/nine.png"></div>
            </div>
        </div>
        <div class="col-md-3">
            <img src="content/ten.png">
        </div>
    </div>

</div>

Capture d'écran de la grille - http://i.stack.imgur.com/a3YBr.jpg

twitter-bootstraptwitter-bootstrap-3grid
14
kingprawn123

Votre syntaxe de grille est incorrecte: votre div de première ligne a pour enfants col-md-6, col-md-6, col-md-9 et col-md-3. Le système de grille Bootstrap comporte 12 colonnes et non 24.

Peut-être essayer quelque chose comme ceci (enveloppé col-md-9 et col-md-3 dans une nouvelle ligne div):

<div class="container">

    <div class="row">
        <div class="col-md-6">
            <img src="content/one.png">
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6"><img src="content/two.png"></div>
                <div class="col-md-6"><img src="content/three.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/four.png"></div>
                <div class="col-md-6"><img src="content/five.png"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3"><img src="content/six.png"></div>
                <div class="col-md-9"><img src="content/seven.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/eight.png"></div>
                <div class="col-md-6"><img src="content/nine.png"></div>
            </div>
        </div>
        <div class="col-md-3">
            <img src="content/ten.png">
        </div>
    </div>

</div>
7
Getz

J'ai utilisé votre syntaxe de grille sur un bootply clair, supprimé les images et il semble fonctionner correctement. Vous n'avez pas fait jsfiddle ou bootply, il n'est donc pas possible de vous aider davantage sans cela. Voici à quoi ressemble votre grille avec seulement du texte:

Exemple de bootply

Essayez d’ajouter une classe img-responsive à toutes les images à l’intérieur des colonnes pour les empêcher de déborder des colonnes dans lesquelles elles se trouvent.

3
Maciej Gurban

Si vous essayez d’obtenir une grille 16x16, la largeur des colonnes imbriquées n’est pas correcte:

Commencez par regarder cette section:

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-3"><img src="content/six.png"></div>
            <div class="col-md-9"><img src="content/seven.png"></div>
        </div>

Vous emboîtez une colonne 1/4 (3/12) dans une colonne 3/4 (9/12). Pour déterminer la largeur finale de la colonne, multipliez-les et obtenez 3/16. Vous voulez vraiment une colonne 1/4 (4/16). Pour résoudre ce problème, vous devez diviser cette section (3/4) en tiers au lieu de trimestres (4/12 = 1/3 et 8/12 = 2/3):

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-4"><img src="content/six.png"></div>
            <div class="col-md-8"><img src="content/seven.png"></div>
        </div>

Pour rendre le problème plus évident, ajoutez une couleur d’arrière-plan à la cellule contenant seven.png. Vous verriez que la couleur remplira l'espace vide pour que la cellule soit réellement là. La photo est trop étroite pour la rendre évidente.

Le même correctif est nécessaire pour la moitié inférieure de cette section:

        <div class="row">
            <div class="col-md-6"><img src="content/eight.png"></div>
            <div class="col-md-6"><img src="content/nine.png"></div>
        </div>
    </div>

Maintenant, vous prenez une colonne 3/4 et vous vous divisez en 1/2, vous créez donc une colonne 3/8 (6/16) à gauche, là où vous voulez 1/2 (8/16ème) et une colonne 3/8 (6/16) à droite où vous souhaitez un 1/4 (4/16ème) et un autre. Encore une fois, la solution consiste à diviser le solde en tiers:

        <div class="row">
            <div class="col-md-8"><img src="content/eight.png"></div>
            <div class="col-md-4"><img src="content/nine.png"></div>
        </div>
    </div>

Et encore une fois si vous mettez une couleur de fond derrière nine.png, vous verrez que cela remplit les blancs.

0
claytond