html - .icon .pull-left 表示奇怪的行为

Question

我正在使用 Bootstrap 开发一个应用程序(使用 Dark Admin theme )，我为管理员提供了一个小的用户提要，类似于 this demo 上的提要面板。 .我的 HTML 是这样的，我将 CSS 与演示中的 CSS 进行了比较(因此您可以假设样式完全相同):

<div id="feed_box">
      <section class="feed-item">
            <div class="icon pull-left"><i class="fa fa-info"></i></div>
            <div class="feed-item-body">
                    <div class="text">Some text goes here</div>
                    <div class="time pull-left">44 minutes ago.</div>
            </div>
      </section>
      <section class="feed-item">
            <div class="icon pull-left"><i class="fa fa-info"></i></div>
            <div class="feed-item-body">
                    <div class="text">Some text goes here</div>
                    <div class="time pull-left">44 minutes ago.</div>
            </div>
      </section>
</div>

HTML 的结构也与演示中的示例类似。但是，当我在自己的元素中打开页面时，icon pull-left 元素到处都是:

我想制作一个 jsFiddle，但是当我导出呈现的 HTML 页面并查看该页面时，它运行良好。

为什么这些图标的缩进这么乱？我该如何解决这个问题？

我完全不确定这里哪些信息很重要，所以如果不够清楚请告诉我。

Answer 1

添加 clearfix 类将解决这个问题:

<section class="feed-item clearfix">
    <div class="icon pull-left"><i class="fa fa-info"></i></div>
    <div class="feed-item-body">
        <div class="text">Some text goes here</div>
        <div class="time pull-left">44 minutes ago.</div>
    </div>
</section>

向左拉 正在影响下面的元素。

如果您有兴趣了解 pull-left 如何改变元素的流动，添加一个 border: 1px solid red; 到 pull -left CSS 中的类。