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

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

<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之后.

Answer 2

就像医生说的那样

pull-left并且pull-right从v3.3.0开始不再使用该用途.

你在jsfiddle中使用的bootstrap版本是3.0.

更改外部源

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.3.0/css/bootstrap.min.css http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js

解决了这个问题.

请参阅更新的链接http://jsfiddle.net/x3a1c40h/7/