Html 图像顶部的引导面板

我正在使用Bootstrap3，需要制作一个受启发的横幅

到目前为止，我一直这样做：

这幅画没有反应。如果我将class

img responsive

添加到

img src

标记中，我可以使图片响应，但是

如何使图片响应，并使框在所有屏幕尺寸的图片顶部浮动

 <div class="container">
    <div class="row">
     <!-- Picture Column -->
     <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
        <div>
            <img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
         </div>
     </div>
     <!-- Contact Column-->
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm" style="padding-top: 80px;">
        <div>
            <div class="panel panel-default">
             <div class="panel-heading">Contact</div>
             <div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
            </div>
        </div>
     </div>
  </div><!--/row-->
</div><!--/container-->

接触
这是联系方式。将有一个电话号码、打开/关闭时间和一封电子邮件。

添加了一个新的相对（图像容器）和绝对（面板容器）div，并删除了不必要的类

.美国广播公司{
位置：相对位置；
}
def{
位置：绝对位置；
顶部：30px；
右：20px；
最大宽度：300px；
}

引导示例
接触
这是联系方式。将有一个电话号码、打开/关闭时间和一封电子邮件。

将此css添加到您的div“col-lg-3 col-md-3 col-sm-4 col-xs-12向右拉sm”

然后像这样放置

 <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
    <div>
        <img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
     </div>
     <!-- Contact Column-->
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm" style="padding-top: 80px;">
        <div>
            <div class="panel panel-default">
             <div class="panel-heading">Contact</div>
             <div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
            </div>
        </div>
     </div>
 </div>

接触
这是联系方式。将有一个电话号码、打开/关闭时间和一封电子邮件。

非常感谢您的建议。我可以看出这几乎解决了我的问题。当你的建议出现在手机屏幕尺寸上时，是不是不可能让图像变大，而不是让盒子盖住图像？我真的很喜欢这样的例子：我无法访问你刚才给出的链接。请更新链接，我将在一个小时左右的时间内调查您的问题，因为我现在要休息一段时间。：）非常感谢您抽出时间，对于这张照片我很抱歉。我在这里上传了图片：。你可以看到右边的图片，我得到的灵感高度很高，我的灵感非常小。有没有办法，我可以控制小尖叫声的高度？我还可以看到文本框没有使用

col-12

。看起来该框没有调用任何引导，而是手动放置的。这应该是可能的，以正确的位置引导？是的，我现在得到了你想要的。我将在这里张贴时，我修复上述代码相应。现在一个小时内无法访问我的电脑！请耐心点，我会尽力解决：）非常感谢@Nandita Arora Sharma。你是个好人。谢谢你的建议。我可以看出这并不能完全解决我的问题。但是谢谢你抽出时间。

 <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
    <div>
        <img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
     </div>
     <!-- Contact Column-->
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm" style="padding-top: 80px;">
        <div>
            <div class="panel panel-default">
             <div class="panel-heading">Contact</div>
             <div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
            </div>
        </div>
     </div>
 </div>