Question

如何将此表单移至＃34; carousel＆＃34;？ 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/

Answer 1

在我看来，你几乎就在那里。您只需将position: absolute;，width: 100%;和top: 0;添加到您的css中的.vertical-center班级。

请尝试下面的代码段或检查此 Updated Fiddle ，因为它在Stack Overflow片段中很难看到。我希望它有所帮助。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

如果您不希望表单直接连接到视口的顶部，只需将top: 0;设置为您希望它远离视口顶部的距离，即{{1 }或top: 10px;;

如何在图像上移动表单＆＃34; carousel＆＃34; （引导）？

1 个答案: