.img-responsive 与 .pull-right 一起使用时会中断答案

【问题标题】：.img-responsive breaks when used with .pull-right.img-responsive 与 .pull-right 一起使用时会中断
【发布时间】：2014-08-24 00:07:41
【问题描述】：

我有一些带有.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 也打开和关闭。

我在这里错过了什么？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用 col-** 类代替 pull-left 和 pull-right。

【讨论】：

【解决方案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

【讨论】：