如何將此窗體更改爲響應

嗨，下面的代碼中，我顯示登錄窗體。沒有任何工作正常，但我想要將此窗體更改爲響應。如何將此窗體更改爲響應

任何一個可以幫助我

HTML

<div class="login-01"> 
     <div class="one-login hvr-float-shadow"> 
      <div class="one-login-head"> 
        <img src="images/top-lock.png" alt=""/> 
        <h1>LOGIN</h1> 
        <span></span> 
      </div> 
      <form> 
       <li> 
        <input type="text" class="text" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Username';}" ><a href="#" class=" icon user"></a> 
       </li> 
       <li> 
        <input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"><a href="#" class=" icon lock"></a> 
       </li> 
       <div class="p-container"> 
         <label class="checkbox"><input type="checkbox" name="checkbox" checked><i></i>Remember Me</label> 
         <h6><a href="#">Forgot Password ?</a> </h6> 
          <div class="clear"> </div> 
       </div> 
       <div class="submit"> 
         <input type="submit" onclick="myFunction()" value="SIGN IN" > 
       </div> 

        <h5>Don't have an account ?<a href="AdmissionForm.html"> Sign Up </a></h5> 
       </form> 
     </div> 

</div>

來源

2015-03-19 hsp care

嘗試使用[Bootstrap]（http://getbootstrap.com/css/#grid）。 – GoBusto 2015-03-19 10:23:57

只要你沒有你的.login，01類中的任何元素與一個固定的寬度，你的表格已經響應。請參閱http://codepen.io/panchroma/pen/gbZrKj並更改您的瀏覽器寬度。

爲了達到最佳效果，你也想在你的網頁

<meta name="viewport" content="width=device-width, initial-scale=1.0">

的頭部以下meta標籤，你可能需要包括CSS重置像http://cdnjs.com/libraries/normalize

最後兩個步驟可能對你的頁面佈局造成破壞，但使整個頁面響應是另一個問題。

祝你好運！

來源

2015-03-19 13:07:19

感謝您給予回覆，但它的工作 – 2015-03-30 08:02:47

如何將此窗體更改爲響應

回答

相關問題