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

更换 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>

Answer 2

我认为模糊的图像是由于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/吗？

编辑——（在引导响应之后）

使用一点 CSS 我让它工作（不使用媒体查询等）。 CSS 现在少了很多，我希望这是您正在寻找的（因为图像尽可能接近文本）。使用float: left 到img, h2 和一点padding-top: 24px 来排列图像。见引导： http://www.bootply.com/2Hp6stSs9B