与.pull-right一起使用时.img响应中断 [英] .img-responsive breaks when used with .pull-right

问题描述

我有一些有 .pull-left 和 .pull-right 的图片特定模式。我也使用 .img-responsive 。

图片如下：

 < img src =〜/ Images / test-modern.jpgclass =pull-right img-responsive/> 
< img src =〜/ Images / test-modern.jpgclass =pull-left img-responsive/> 
  

似乎对于具有 .pull-right .img-响应不工作。但是，它可以使用 .pull-left 。

.pull-right 在后台使用 float：right 如果我发现在F12工具，并切换它打开和关闭我可以看到

这里缺少了什么？

c> c> c>设置 max-width：100％。它仅在每行有一个元素时有效。

选项＃1：图片粘住两侧

b

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

  .row-pictures .img-responsive {
 max-width：50％
} 
  

Bootply示例

这将使照片贴在两边。 / p>

选项＃2：图片相互粘贴

 < div class =row row-pictures> 
< img src =〜/ Images / test-modern.jpgclass =col-xs-6 img-responsive/> 
< img src =〜/ Images / test-modern.jpgclass =col-xs-6 img-responsive/> 
< / div> 
  

  .row-pictures img {
 padding： 0; / *可选：只删除gutter * / 
} 
  

Bootply示例

I've got some images that have .pull-left and .pull-right to align them in a specific pattern. I'm also using .img-responsive.

The images look like this:

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

It seems that for the images that have .pull-right .img-responsive does not work. However, it does work with .pull-left.

.pull-right uses float:right in the background and if I find that in the F12 tools and toggle it on and off I can see .img-responsive also turning on and off.

What am I missing here?

解决方案

Your problem is that .img-responsive set max-width: 100%. It works only when you've got a single element per line. Here are two options to change this, choose the one which fit you need.

Option #1 : pictures stick the sides

<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

This will make pictures to stick both sides.

Option #2 : pictures stick each other

<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

这篇关于与.pull-right一起使用时.img响应中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！