Question

我正在使用Bootstrap 3，需要制作一个受this page启发的横幅。

我直到现在才这样做：Codepen。

图片无响应。如果我将课程img-responsive添加到img src标记，然后this happens，我可以使图片响应。

如何让图片响应，并让所有屏幕上的图片浮动在图片的顶部？

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

Answer 1

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

 
.abc {
  position: relative;
}
.def {
  position: absolute;
  top: 30px;
  right: 20px;
  max-width: 300px;
}

<head>
   <title>Bootstrap Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
  <div class="row">
     <!-- Picture Column -->
     <div class="col-sm-12">
        <div class="abc">
           <img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
           <div class="def">
              <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>
     <!-- Contact Column-->
  </div>
  <!--/row-->
   </div>
   <!--/container-->
</body>

 
.abc {
  position: relative;
}
.def {
  position: absolute;
  top: 10px;
  right: 20px;
  max-width: 300px;
}

@media screen and (max-width: 480px) {
.def {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 480px;
    width: 95%;
    height: 85%;
}
.panel.panel-default .panel-heading { 
padding: 5px 15px;
}
.panel.panel-default .panel-body {
  padding: 5px;
}
img.img-responsive {
  height: 200px;
}

}

<head>
   <title>Bootstrap Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
  <div class="row">
 <!-- Picture Column -->
 <div class="col-sm-12">
<div class="abc">
   <img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" />
   <div class="def">
      <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>
 <!-- Contact Column-->
  </div>
  <!--/row-->
   </div>
   <!--/container-->
</body>

Answer 2

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

padding-top: 40px;
position: absolute;
top: 0;
right: 5%;

并将其置于此

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

在图像顶部的Bootstrap面板

2 个答案: