Div 不会在没有引导程序的额外清除修复的情况下堆叠

Question

我对引导相对较新，并创建了一个第一个主页，其中包含一个大巨型屏幕和下面 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>

我想为平板电脑和移动设备垂直堆叠三列，并且由于 bootstrap 提供浮动布局，我的印象是这会自动发生，因为容器类负责清除其子级的浮点数。

在代码中，我仍然需要对每一列使用 clearfix，让块堆叠用于手机和平板电脑。

我假设它必须这样做，我将图像向左浮动，容器 clearfix 只是到达直接后代，哪些列？

我可能想错了方向，需要一些光。

Answer 1

您不需要在列上使用 clearfix。确保另一个 CSS 类(如 block-margin(不会影响列。还要对图像使用img-responsive，以免溢出列。

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