Div在引導程序中沒有額外的clearfix時不會堆疊

Question

我對引導程序比較陌生，並創建了第一個帶有大的jumbotron和3個水平對齊列的主頁面。全部包括下面的一個圖像和文字。看到這裏代碼：

<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> 

我會想垂直堆疊的三列的平板電腦和手機，而且由於自舉提供了一個浮動的佈局，我的印象是，這將自動由於容器類的發生負責清算它的孩子的浮動。

在代碼中，我仍然需要使用每個列的clearfix來讓塊堆棧移動和平板電腦。

我假設它有這樣做，我把圖像左浮動和容器清晰度只是達到直接後裔，這是列？

我可能是在一個完全錯誤的方向思考，需要一些光。

Answer 1

您不需要在列上使用clearfix。確保另一個CSS類（如block-margin）不影響列。在圖像上也使用img-responsive，以免溢出列。

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