twitter-bootstrap - bootstrap3 媒体对象 不起作用

Question

按照 http://getbootstrap.com/components/#media 的说明进行操作，我复制了代码:

<div class="container">
<div class="media">
      <a class="media-left media-bottom" href="#">
        <img src="https://www.gravatar.com/avatar/16250bf5bb2c9f970cdc0f43c830b34f?s=32&d=identicon&r=PG">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Bottom aligned media</h4>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
        <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </div>
    </div>
</div>

在 jsfiddle http://jsfiddle.net/x3a1c40h/3/

我们可以看到 img 出现在文本的顶部，但没有出现在左侧，这是为什么呢？

谢谢!

Answer 1

向 img 添加 pull-left

<div class="container">
<div class="media">
      <a class="media-left media-bottom" href="#">
        <img class="pull-left" src="https://www.gravatar.com/avatar/16250bf5bb2c9f970cdc0f43c830b34f?s=32&d=identicon&r=PG">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Bottom aligned media</h4>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
        <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </div>
    </div>
</div>

.pull-left 和 .pull-right 类也存在，并且以前用作媒体组件的一部分，但从 v3.3.0 开始不推荐使用。它们大致相当于 .media-left 和 .media-right，除了 .media-right 应该放在 html 中的 .media-body 之后。