Bootstrap img響應類無法正常工作

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/嗎？

編輯-（啟動響應后）

我使用了一點CSS就可以正常工作（無需使用媒體查詢等）。 現在CSS少了很多，我希望這就是您要尋找的（因為圖像盡可能地靠近文本）。 使用float: left到img, h2和一點padding-top: 24px圖像的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>