twitter-bootstrap bootstrap3 媒体对象 <div class="media"> 不起作用

bootstrap3 media object <div class="media"> not works

提问by SetupX

Follow the instruction at http://getbootstrap.com/components/#media, I copied the code:

按照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>

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

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

As we can see the img appears on the top of the text, but not on the left, why is that?

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

Thank you!

谢谢！

回答by Miomir Dancevic

Add pull-left to img

向 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>

The classes .pull-left and .pull-right also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to .media-left and .media-right, except that .media-right should be placed after the .media-body in the html.

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

回答by Alan Dong

Just like the doc said

就像医生说的

pull-leftand pull-rightdeprecated for that use as of v3.3.0.

pull-left并pull-right从v3.3.0 开始弃用该用途。

And the version of bootstrap you were using in the jsfiddle was 3.0.

您在 jsfiddle 中使用的引导程序版本是 3.0。

Change the external source from

将外部源从

http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

to

到

http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js

http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js

resolves the problem.

解决问题。

see the updated link http://jsfiddle.net/x3a1c40h/7/

查看更新的链接http://jsfiddle.net/x3a1c40h/7/