与.pull-right一起使用时，.img响应中断

Question

我有一些.pull-left和.pull-right的图片以特定模式对齐它们。我也在使用.img-responsive。

图片看起来像这样：

<img src="~/Images/test-modern.jpg" class="pull-right img-responsive" />
<img src="~/Images/test-modern.jpg" class="pull-left img-responsive" />

似乎对于.pull-right .img-responsive的图片不起作用。但是，它适用于.pull-left。

.pull-right在后​​台使用float:right，如果我在F12工具中找到它并打开和关闭它，我可以看到.img-responsive也打开和关闭。

我在这里缺少什么？

Answer 1

而不是pull-left和pull-right使用col-**类。

Answer 2

您的问题是.img-responsive设置max-width: 100%。它只适用于每行有一个元素的情况。这里有两个选项来改变它，选择一个适合你需要的选项。

选项＃1：图片贴在边上

<div class="row-pictures">
    <img src="~/Images/test-modern.jpg" class="pull-right img-responsive">
    <img src="~/Images/test-modern.jpg" class="pul-left img-responsive">
</div>

.row-pictures .img-responsive {
  max-width: 50%
}

<强> Bootply example

这会使照片粘在两边。

选项＃2：图片相互粘贴

<div class="row row-pictures">
    <img src="~/Images/test-modern.jpg" class="col-xs-6 img-responsive" />
    <img src="~/Images/test-modern.jpg" class="col-xs-6 img-responsive" />
</div>

.row-pictures img {
    padding: 0; /* optional: only to remove the gutter */
}

<强> Bootply example