如何在图像“轮播”（引导程序）上移动表单？答案

【问题标题】：How can I move an form over image "carousel" (bootstrap)?如何在图像“轮播”（引导程序）上移动表单？
【发布时间】：2018-08-11 06:31:58
【问题描述】：

如何将此表单移到“轮播”上？ HTML代码

<html>
<head>
 <title>test</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">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         </head>
        <body>



        <div id="myCarousel" class="carousel slide" data-ride="carousel">

          <div class="carousel-inner" role="listbox">

                   <div class="item active">

             <img src="https://wallpaperscraft.com/image/asia_skyscrapers_river_top_view_night_lights_city_28590_1920x1080.jpg" width="100%" height="100%">
           </div>
           <div class="item">
        <img src="http://eskipaper.com/images/top-city-wallpapers-1.jpg"  width="100%" height="100%" class="img-responsive">
            </div>

        <div class="item">
           <img src="http://www.creativehdwallpapers.com/uploads/large/city/top-5-city-wallpaper.jpg"  width="100%" height="100%" class="img-responsive">
          </div>
          </div>
         <div class="vertical-center">
        <div class="container-fluid">
            <div class="row">
         <div class="col-md-4 col-sm-4 col-xs-12">
            <form>
            <div class="form-group">
                <label for="numeutilizator">Nume de utilizator</label>
                <input type="text" name="unr" class="form-control" id="numeutilizator" placeholder="Nume de utilizator">

            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="emr" class="form-control" placeholder="Email@email.dom" id="email">
            </div>
            <div class="form-group">
                <label for="parola">Parola</label>
                <input type="password" class="form-control" name="pwr"  placeholder="********" id="parola">
            </div>
                  <div class="form-group">
                   <input type="submit" name="r" class="btn btn-default" value="Inregistreaza-te">
</div>

                      </form>
                   </div>
                </div>
               </div>
                      </div>
                    </body>
                   </html>

css代码

.vertical-center {
 min-height: 100%; 
  min-height: 100vh; 
 display: flex;
    align-items: center;}
      form
   {
   border-radius: 15px 15px 15px 15px;
 margin:auto;
       padding: 25px;
    text-align: center;
     background-color:rgba(237,237,237,0.5);
    background-color:hsla(0, 0% ,93%,0.5);
         width: 500px;
          }

我尝试了 z-index 和许多其他的东西，但我没有成功。我正在尝试做的是将旋转木马作为背景图像。如果有人可以为我提供建议，我可以使用其他东西而不是旋转木马，而是像幻灯片一样......？或链接到 jsfiddle。

https://jsfiddle.net/7bzL8p2y/11/

【问题讨论】：

标签： html css forms bootstrap-4

【解决方案1】：

在我看来，你就快到了。您只需将position: absolute;、width: 100%; 和top: 0; 添加到您的CSS 中的.vertical-center 类。

尝试下面的 sn-p 或检查此 Updated Fiddle，因为在 Stack Overflow sn-p 中很难看到它。希望对你有帮助。

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
  top: 0;
}

form {
  border-radius: 15px 15px 15px 15px;
  padding: 25px;
  text-align: center;
  background-color: rgba(237, 237, 237, 0.5);
  background-color: hsla(0, 0%, 93%, 0.5);
  width: 500px;
}

#carousel-img {
  height: 100vh;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://wallpaperscraft.com/image/asia_skyscrapers_river_top_view_night_lights_city_28590_1920x1080.jpg" class="img-responsive" id="carousel-img">
    </div>
    <div class="item">
      <img src="http://eskipaper.com/images/top-city-wallpapers-1.jpg" class="img-responsive" id="carousel-img">
    </div>
    <div class="item">
      <img src="http://www.creativehdwallpapers.com/uploads/large/city/top-5-city-wallpaper.jpg" class="img-responsive" id="carousel-img">
    </div>
  </div>

  <div class="vertical-center">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-12">
          <form>
            <div class="form-group">
              <label for="numeutilizator">Nume de utilizator</label>
              <input type="text" name="unr" class="form-control" id="numeutilizator" placeholder="Nume de utilizator">

            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" name="emr" class="form-control" placeholder="Email@email.dom" id="email">
            </div>
            <div class="form-group">
              <label for="parola">Parola</label>
              <input type="password" class="form-control" name="pwr" placeholder="********" id="parola">
            </div>
            <div class="form-group">
              <input type="submit" name="r" class="btn btn-default" value="Inregistreaza-te">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

如果您不希望窗体直接连接到视口顶部，只需将top: 0; 设置为您希望它与视口顶部的距离即top: 10px; 或top: 20px ;

【讨论】：