..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

您的问题是.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%
}

启动实例

这将使图片贴在两边。

选项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 */
}

启动实例

Answer 2

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