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

发布时间：2020-12-17 20:40:56 所属栏目：安全来源：网络整理

导读：按照 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=32d=identicon

按照 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出现在文本的顶部,但不在左边,为什么呢？

谢谢！

解决方法

添加左拉到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,nascetur ridiculus mus.</p>
      </div>
    </div>
</div>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!