在引导程序中没有额外的 clearfix 时，Div 不会堆叠

Posted 2023-03-04

【中文标题】在引导程序中没有额外的 clearfix 时，Div 不会堆叠

【英文标题】：Div don't stack without additional clearfix in bootstrap

【发布时间】：2017-10-28 04:06:30

【问题描述】：

我对 bootstrap 比较陌生，并创建了第一个主页，其中有一个大的 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 以让块堆叠用于移动设备和平板电脑。

我假设它必须做某事，我将图像向左浮动并且容器 clearfix 刚刚到达直接后代，哪些是列？

我可能在思考一个完全错误的方向，需要一些启发。

【参考方案1】：

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

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

【讨论】：

非常感谢！！我想我现在更清楚我真正想要的是什么：在平板电脑视图中，我希望将文本放在图像右侧而不是压到底部，这就是 clearfix 所达到的。

我让图像向左浮动，正好符合平板电脑的尺寸。我希望这是正确的。为重复发帖道歉。