代码之家 › 专栏 › 技术社区 › MK-DK

图像顶部的引导面板

twitter-bootstrap css html

MK-DK · 技术社区 · 7 年前

我正在使用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-->

2 回复 | 直到 7 年前

Nandita Sharma 7 年前

添加了一个新的相对(图像容器)和绝对(面板容器)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>

Parth Shah 7 年前

将此css添加到div“col-lg-3 col-md-3 col-sm-4 col-xs-12向右拉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>