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/

bootstrap3媒体对象<div class =“media”>无法正常工作</div>

2 个答案: