Bootstrap img-responsive类无法正常工作

Question

我目前遇到的问题是引导程序img-responsive类不能正常工作，因为我需要将图像尽可能地放在div框中。我有两个相同大小的箭头，围绕我的网站的标题。当浏览器缩小到移动大小时，左箭头看起来比右对齐更小，更扭曲。

全尺寸标题

手机大小标题

HTML：

        <div class="row">
            <div class="col-lg-3"> </div> 
            <div class="col-xs-3 col-lg-2 arrow-right">
                <img class="img-responsive img-right" src="img/arrow-right.png" alt="">
            </div>
                <div class="col-xs-6 col-lg-2 text-center">
                    <h2 class="section-heading">RSVP</h2>
                </div>
            <div class="col-xs-3 col-lg-2 arrow-left">
                <img class="img-responsive img-left" src="img/arrow-left.png" alt="">
            </div>
            <div class="col-lg-3"> </div>
        </div>

CSS：

.arrow-right {
   padding-top: 12px;
}

.arrow-left {
    padding-top: 12px;
    padding-left: 0;
 }
@media (min-width: 768px) {

  .img-right {
      display: block;
      margin: auto;
      margin-left: 34px;

  }
  .img-left {
      margin: auto;
      margin-right: 30px;
  }

}

我的问题是，是否有更简单的方法让这些箭头尽可能接近标题并让它们缩小到手机大小完美？

Answer 1

我认为模糊图像是由display: block引起的，为了使图像尽可能接近文本，您可以考虑使用::after或::before伪元素。您也可以尝试以下HTML：

<div class="col-xs-3 col-lg-2 arrow-right">    
        </div>
            <div class="col-xs-12 col-lg-6 text-center">
                <img class="img-responsive img-right" src="img/arrow-right.png" alt="">
                <h2 class="section-heading">RSVP</h2>
                <img class="img-responsive img-left" src="img/arrow-left.png" alt=""> 
            </div>
        </div>
</div>

另外，你可以发一个小提琴或http://www.bootply.com/吗？

编辑 - （在bootply响应之后）

使用一点CSS我得到它工作（没有使用媒体查询等）。 CSS现在要少得多，我希望这是你正在寻找的（因为图像尽可能接近文本）。将float: left用于img, h2并将padding-top: 24px用于图片，使其排成一行。看bootply： http://www.bootply.com/2Hp6stSs9B

Answer 2

更改XS并制作4/4/4

<div class="row">
            <div class="col-lg-3"> </div> 
            <div class="col-xs-4 col-lg-2 arrow-right">
                <img class="img-responsive img-right" src="img/arrow-right.png" alt="">
            </div>
                <div class="col-xs-4 col-lg-2 text-center">
                    <h2 class="section-heading">RSVP</h2>
                </div>
            <div class="col-xs-4 col-lg-2 arrow-left">
                <img class="img-responsive img-left" src="img/arrow-left.png" alt="">
            </div>
            <div class="col-lg-3"> </div>
        </div>