Question

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

我希望将三列垂直堆叠用于平板电脑和移动设备，并且由于bootstrap提供了浮动布局，因此我认为这会自动发生，因为容器类负责清除其子项的浮动。

在代码中，我仍然需要为每个列使用clearfix来让块堆栈用于移动设备和平板电脑。

我假设它已经做某事我把图像向左浮动而容器clearfix只是到达直接后代，这是列？

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

Answer 1

您不需要在列上使用clearfix。确保另一个CSS类（例如block-margin）不影响列。同时在图像上使用img-responsive，这样就不会溢出列。

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

Div没有在bootstrap中没有额外的clearfix而堆叠

1 个答案: