Question

我使用bootstrap 3模板设计了登录页面。我必须放置一个忘记密码链接右端记住我复选框，但当我调整浏览器大小时忘记密码链接被取代我的意思是忘记密码链接到第二行如何避免这个

预期结果：

.vertical-offset-100{
    padding-top:100px;
}

<div class="container">
    <div class="row vertical-offset-100">
        <div class="col-md-4 col-md-offset-4">
         <div class="alert alert-success">
   Incorrect username or password.
  </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Please sign in</h3>
                </div>
                <div class="panel-body">
                    <form accept-charset="UTF-8" role="form">
                    <fieldset>
                        <div class="form-group">
                            <input class="form-control" placeholder="E-mail" name="email" type="text">
                        </div>
                        <div class="form-group">
                            <input class="form-control" placeholder="Password" name="password" type="password" value="">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input name="remember" type="checkbox" value="Remember Me"> Remember Me
                            </label>
                        </div>

                        <input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
                    </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

删除此内容：

.login-panel {
    margin-top: 25%; 
}

by：（参见小提琴：https://jsfiddle.net/8f4epsqh/）

.login-panel{
   margin-top: 15px!important;}
.alert-danger{
  margin-top: 15px!important;
}

                      <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>
<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
			
			 <div class="alert alert-danger alert-dismissible fade in">
             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
             <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
               </div>
                 <div class="login-panel panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Please Sign In</h3>
                    </div>
                    <div class="panel-body">

                    <form role="form">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Password" name="password" type="password" value="">
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="remember" type="checkbox" value="Remember Me">Remember Me
                                    </label>
                                </div>
                                <!-- Change this to a button or input when using this as a form -->
                                <a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

你可以设置margin-top提醒（就像我一样）

Answer 2

检查这一个

https://jsfiddle.net/F86597/pq4ncrb7/1/

.alert-danger{
  margin-top: -85px!important;
  position: absolute;
}
.login-panel{
   margin-top: 100px!important;
}

Answer 3

伙计我为上面的问题找到了更好的解决方案，你可以调整浏览器大小没问题

.vertical-offset-100{
    padding-top:100px;
}

 <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>
<div class="container">
    <div class="row vertical-offset-100">
    	<div class="col-md-4 col-md-offset-4">
		 <div class="alert alert-success">
   Incorrect username or password.
  </div>
    		<div class="panel panel-default">
			  	<div class="panel-heading">
			    	<h3 class="panel-title">Please sign in</h3>
			 	</div>
			  	<div class="panel-body">
			    	<form accept-charset="UTF-8" role="form">
                    <fieldset>
			    	  	<div class="form-group">
			    		    <input class="form-control" placeholder="E-mail" name="email" type="text">
			    		</div>
			    		<div class="form-group">
			    			<input class="form-control" placeholder="Password" name="password" type="password" value="">
			    		</div>
			    		<div class="checkbox">
			    	    	<label>
			    	    		<input name="remember" type="checkbox" value="Remember Me"> Remember Me
			    	    	</label>
			    	    </div>
						
			    		<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
			    	</fieldset>
			      	</form>
			    </div>
			</div>
		</div>
	</div>
</div>

Answer 4

继承人是你的代码：

<!DOCTYPE html>
<html lang="cs">

<head>
  <meta charset="utf-8">
  <meta name="author" content="Vojtěch Matras">
  <title>Admin Express Blogs&Magazines</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>

<body>
  <header>


    <div class="container">
      <div class="row vertical-offset-100">
          <div class="col-md-4 col-md-offset-4">
           <div class="alert alert-success">
     Incorrect username or password.
    </div>
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h3 class="panel-title">Please sign in</h3>
                  </div>
                  <div class="panel-body">
                      <form accept-charset="UTF-8" role="form">
                      <fieldset>
                          <div class="form-group">
                              <input class="form-control" placeholder="E-mail" name="email" type="text">
                          </div>
                          <div class="form-group">
                              <input class="form-control" placeholder="Password" name="password" type="password" value="">
                          </div>
                          <div class="container">
                            <div class="row">
                              <div class="col-6">
                                <div class="checkbox">
                                  <label>
                                      <input name="remember" type="checkbox" value="Remember Me"> Remember Me
                                  </label>
                              </div>

                              </div>
                              <div class="col-6">
                                <div>
                                  <a href="#" >Forgot password??</a>
                                </div>

                              </div>
                            </div>
                          </div>
                          <input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
                      </fieldset>
                      </form>
                  </div>
              </div>
          </div>
      </div>
  </div>

</body>

</html>

你可以检查小提琴：https://jsfiddle.net/ouuj70Ld/调整窗口大小以查看响应性。

响应性不适用于忘记密码链接

4 个答案: