Twitter-Bootstrap Grilles

Question

Je suis nouveau ici et j'ai une question. J'ai lu sur bootstrap et j'ai quelques questions rapides concernant la disposition de la grille. Je comprends que la mise en page devrait ajouter jusqu'à 12 et a été en train de ramasser avec pour juste avoir une idée de cela. Mon premier morceau de code m'a donné l'affichage que je m'attendais, le code et l'image montrés ci-dessous. Édité, apparemment j'ai besoin de 10 points rep pour poster des images donc je ne peux pas fournir d'images, désolé.

css:

.c{ 
border-style: solid; 
} 
.r{ 
border-style: solid; 
border-color: red; 
} 
.b{ 
border-style: solid; 
border-color: #ffff00; 
} 

html:

<div class="container-fluid"> 
<div class="row r"> 
    <div class="col-md-6 c"> 
     this is a test 

    </div> 

    <div class="col-md-6 c"> 
     this is another test 
     <br><br><br> 
     test 
    </div> 
    <div class="col-md-6 c"> 
     <p>this is a test</p> 

    </div> 

    <div class="col-md-6 c"> 
     this is another test 
     <br><br><br> 
     test 
    </div> 
</div> 
<div class="row r"> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
</div> 

Cependant, changer la mise en page légèrement en plaçant les plus grandes colonnes à gauche complètement foiré la mise en page:

html:

<div class="container-fluid"> 
<div class="row r"> 

    <div class="col-md-6 c"> 
     this is another test 1 
     <br><br><br> 
     test 
    </div> 

    <div class="col-md-6 c"> 
     this is a test 1 

    </div> 
<div class="row b"> 
    <div class="col-md-6 c"> 
     this is another test 2 
     <br><br><br> 
     test 2 
    </div> 
    <div class="col-md-6 c"> 
     <p>this is a test 2</p> 

    </div> 

</div> 

</div> 
<div class="row r"> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
</div> 

Ce que je pensais voir était les éléments dans la rangée b pour être bien placé sous la ligne r comme on le voit dans le premier exemple. Quelqu'un pourrait-il m'expliquer pourquoi ce n'était pas le cas?

Merci.

Answer 1

vous avez oublié de fermer balise div en première ligne s'il vous plaît voir le commentaire

<div class="container-fluid"> 
<div class="row r"> 

    <div class="col-md-6 c"> 
     this is another test 1 
     <br><br><br> 
     test 
    </div> 

    <div class="col-md-6 c"> 
     this is a test 1 

    </div> 
</div> <!--missed end of row---> 
<div class="row b"> 
    <div class="col-md-6 c"> 
     this is another test 2 
     <br><br><br> 
     test 2 
    </div> 
    <div class="col-md-6 c"> 
     <p>this is a test 2</p> 

    </div> 

</div> 

</div> 
<div class="row r"> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
    <div class="col-md-1 c"> 
     test 
    </div> 
</div>