Question

我一直在努力从我们的bootstrap实例中删除一些已弃用的项目并遇到了这个问题。当将更多链接从.pull-right更改为.media-right时，它似乎丢失了先前放在.pull-right类上的浮动。我是否错误地使用了媒体权利课程？我似乎无法让它与它如何使用它相匹配。

它没有完全样式，但是当你从右拉到右下角时，你可以看到最后一个链接元素上的对齐

小提琴：http://jsfiddle.net/07w13nL8/9/

屏幕截图：http://imgur.com/tuSJSYU

<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在某个宽度上响应，它会相互影响。 Bootply example below

.media-right vs. .pull-right

1 个答案: