html - Bootstrap - 在文本区域之后强制 Div 到下一行

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 col。但是，我的第二张图片位于文本下方，而不是换行。

Screenshot

我怎样才能将它强制到下一行？

谢谢， 布莱恩

Answer 1

这是由于 cols 上的 float:left 引起的 cleafix 问题。您可以通过为特定的 SM viewport 编写 CSS 来手动完成，或者简单地为 clearfix 添加 HTML适用于 SM 视口(viewport)。

检查代码段。

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>