引導 - 強制股利到下一行，當文本區域

Question

後，我有一種感覺，有一個快速的解決方案，這一點，但我難倒。

我有一個簡單的佈局，2山口圖像，4欄文本，2山口圖像，4欄文本。

https://codepen.io/brianpensinger/pen/GEbxxv

<div class="container"> 
<div class="row"> 
    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div> 
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div> 
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
    </div> 
</div> 

當在SM斷點，我想切換到每個6關口。但是，我的第二張圖片位於文字下方，而不是換行。

Screenshot

我怎樣才能迫使它下降到下一行？

感謝， 布賴恩

Answer 1

這是因爲的cleafix問題引起的，由於float:left上cols。您可以通過編寫一個CSS針對特定SM視或簡單地添加HTML爲clearfix其只適用於SM視做手工。

檢查片段。

img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div> 
 
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. 
 
     Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis 
 
     quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 

 
    <!-- ############## Added Clearfix for SM view ############# --> 
 
    <div class="clearfix visible-sm"></div> 
 

 

 
    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div> 
 
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. 
 
     Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis 
 
     quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
    </div> 
 
</div>

Answer 2

您好！

<div class="row"> 
    <div class="col-md-6"> 
     <div class="row"> 
      <div class="col-sm-6 col-md-4"><img src="https://dummyimage.com/300x300/000/fff"></div> 
      <div class="col-sm-6 col-md-8">Text here</div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="row"> 
      <div class="col-sm-6 col-md-4"><img src="https://dummyimage.com/300x300/000/fff"></div> 
      <div class="col-sm-6 col-md-8">Text here</div> 
     </div> 
    </div> 
    </div> 

這將做你所要求的:)通過定義第一行，你已經告訴它是一個塊。通過定義您告訴以md/lg佔據頁面的50％的列。之後，他們會自動走到最後出現問題的地方。

要打擊，你可以定義另一行。通過定義另一行，您已經告訴bootstrap佔用了容器寬度的100％......因爲上面的col不再有效，所以它在100％以上時已經完全統治了。這會給你6/6，一個在另一個之下。