我对此很陌生,但是我设法在图像上添加了标题,并用黑框(我想要的方式)包围了,但是带有文本的黑框(宽度为70%)似乎粘在了图片的左侧。

        <div class="row">
                    <div class="text-center" style="position: relative">
                        <img src="http://i.imgur.com/84AfU5A.jpg" alt="" class="img-responsive center-block" style="border-radius: 25px; ">
                            <div class="caption" style="position: absolute; top: 55%; width:70%; background-color: black; opacity: 0.5">
                      <p style="color: white !important; opacity: 1 !important">“Text Text Text Text</p>
                </div>
         </div>
</div>


抱歉,如果这确实是一个明显的解决方法。

最佳答案

只需将左css属性添加到标题div中,就可以了。
在下面的示例中,我添加了left:5%;



<div class="row">
  <div class="text-center" style="position: relative">
    <img src="http://i.imgur.com/84AfU5A.jpg" alt="" class="img-responsive center-block" style="border-radius: 25px; ">
    <div class="caption" style="position: absolute; top: 55%; left:5%; width:70%; background-color: black; opacity: 0.5">
      <p style="color: white !important; opacity: 1 !important">“Text Text Text Text</p>
    </div>
  </div>
</div>

关于jquery - Bootstrap:图像上的文字叠加层粘在左侧,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41558454/

10-11 14:46