Div ne pas empiler sans clearfix supplémentaire dans bootstrap

Question

Je suis relativement nouveau à bootstrap et ai créé une première page principale avec un grand jumbotron et 3 colonnes alignées horizontalement ci-dessous. Tous incluent une image et un texte ci-dessous. Voir le code ici:

<div class="jumbotron jumbotron-billboard"> 
<div class="img"> 
     </div> 
    <div class="container"> 
     <div class="content"> 
     <h1>Text in jumbotron</h1> 
     <p>Text below jumbotron</p> 
     </div> 
     <p id="center"><a class="btn btn-success btn-lg" href="about" role="button">Contact us »</a></p> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4 block-margin clearfix"> 
     <h3>Header 1</h3> 
     <img src="http://localhost/wp-content/themes/cjribbons/img/1.jpg" class="image-main"> 
     <p class="p">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
     </div> 

    <div class="col-md-4 block-margin clearfix"> 
     <h3>Header 2</h3> 
     <img src="http://localhost/wp-content/themes/..../img/2.png" class="image-main"> 
     <p class="p">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
     </div> 


    <div class="col-md-4 block-margin clearfix"> 
     <h3>Header 3</h3> 
     <img src="http://localhost/wp-content/themes/.../img/3.jpg" class="image-main"> 
     <p class="p">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
     </div> 

</div> 

je voudrais empiler les trois colonnes verticalement pour tablette et mobile, et depuis bootstrap propose une mise en page flottaient, j'avais l'impression que cela se produirait automatiquement depuis la classe conteneur est chargé de la compensation le flotteur de ses enfants.

Dans le code, j'avais toujours besoin d'utiliser clearfix pour chaque colonne pour laisser les blocs empiler pour mobile et tablette.

Je suppose qu'il a sth pour faire que je mette les images pour flotter à gauche et le clearfix de récipient atteint juste les descendants directs, qui sont les colonnes? Je pourrais penser dans une direction totalement fausse et avoir besoin de lumière.

Answer 1

Vous ne devriez pas avoir besoin d'utiliser clearfix sur les colonnes. Assurez-vous qu'une autre classe CSS telle que block-margin n'affecte pas les colonnes. Utilisez également img-responsive sur les images afin de ne pas déborder les colonnes.

https://www.codeply.com/go/3yiM4FjysI