html - 列中的 float 项 (bootstrap3)

Question

我正在尝试将此设计转换为 CSS:

<div class="col-md-4">
    <article class="features">
        <div class="features-icon">        
            <i class="fa fa-leaf"></i>
        </div>
        <div class="features-content">
           <h3>Branding</h3>
           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
        </div>
    </article>
</div>

当我只是 float 图标时，文本占据了图标下方的空间。 当我 float 图标和内容时，它们只是堆叠在一起。

Answer 1

使用来自 bootstrap3 的媒体对象组件: http://getbootstrap.com/components/#media