.media-right vs. .pull-right

Question

我一直在努力从Bootstrap实例中删除一些弃用的项目，并遇到了这个问题。当将视图从.pull-Right更改为.Media-Right时，似乎已经失去了以前放在.pull-Right类上的浮标。我是否错误地使用了媒体权利类？我似乎无法让它与它如何使用。

它没有完全的样式，但是当您从拉拉右翼转换为媒体权利

时，您可以在最后一个链接元素上看到对齐方式

小提琴：http：//jsfiddle.net/07w13nl8/9/

屏幕截图：https：//i.stack.imgur.com/ahmua.jpg

<div class="col-md-3">
    <div class="media media-box">
        <div class="media-box-body">
            <ul class="media-list">
                <li class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="http://placehold.it/50x50" alt="...">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4>
                    </div>
                </li>
            </ul>
                <a class="pull-right" href="#">View More</a>
        </div>
    </div>
</div>

Answer 1

这是问题。您正在使用的是使用col-md-3和内部，您希望物品向左漂浮并向右漂浮。不幸的是，尽管"内容"是完全宽度的，即使它漂浮了。因此，视图更多的链接流失了。

这就是您的方式

<div class="container">
<div class="row">
<div class="col-md-6">
  <ul>
                <li class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="http://placehold.it/50x50" alt="...">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4>
                    </div>
                </li>
            </ul>
</div>
<div class="col-md-3 pull-right">
  <a href="#">View More</a>
</div>

显然，此botstrap在某些宽度上响应彼此的响应能力。