Html 引导img响应类无法正常工作

我目前遇到一个问题，引导

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>

---

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

> P> >我认为模糊图像是由于显示：块，为了使图像尽可能接近文本，可以考虑使用<代码>：： >或<> >：：在伪元素之前。您还可以尝试以下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>

冒险类游戏

另外，你能贴一把小提琴或是一张纸条吗

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

我使用了一点CSS使它工作起来（没有使用媒体查询等）。CSS现在少了很多，我希望这就是你想要的（因为图像尽可能接近文本）。对图像使用

float:left

到

img，h2

和一点

填充顶部：24px

，使其对齐。见引导层：

---

< P>我认为模糊图像是由于显示：块，为了使图像尽可能接近文本，可以考虑使用<代码>：： >或<> >：：在伪元素之前。您还可以尝试以下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>

冒险类游戏

另外，你能贴一把小提琴或是一张纸条吗

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

我使用了一点CSS使它工作起来（没有使用媒体查询等）。CSS现在少了很多，我希望这就是你想要的（因为图像尽可能接近文本）。对图像使用

float:left

到

img，h2

和一点

填充顶部：24px

，使其对齐。见引导层：

---

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

冒险类游戏

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

冒险类游戏

你能把它编成一段或一段吗？@sagarkodte-Hi。有没有办法将引导包包含到JSFIDLE中？我找不到这样做的方法。只需单击左侧的外部资源side@sagarkodte你能把它编一段或一段吗？@sagarkodte嗨。有没有办法将引导包包含到JSFIDLE中？我找不到这样做的方法。只需单击左侧的外部资源side@sagarkodte这是bootply链接感谢您的回答，尽管它似乎不起作用。这是bootply链接感谢您的回答，尽管它似乎不起作用。它起作用了！太好了，谢谢！你能解释一下为什么会这样吗？我有点好奇。对于图像来说，

col-xs-3

太小了吗？因为col-xs-6，这个地方会很大，里面没有太多东西，所以会产生很多空白。最好检查一下这个部分：它工作了！太好了，谢谢！你能解释一下为什么会这样吗？我有点好奇。对于图像而言，

col-xs-3

是否太小？这是因为col-xs-6这个地方会很大，而且里面没有太多东西，所以会产生很多空白。最好检查一下这个部分：