使用期，使用引導程序響應引導響應以下圖片，我初學者使用引導響應爲平板電腦和手機

-1

我設計一個網頁.. create_account.png for create_account page 使用期，使用引導程序響應引導響應以下圖片，我初學者使用引導響應爲平板電腦和手機

和HTML如下。

<!DOCTYPE HTML> 

<html> 

<head> 
<meta http-equiv="content-type" content="text/html" /> 
<meta name="author" content="" /> 
<meta charset="utf-8"> 
<title>Bootstrap Responsive</title> 
<meta content="width=device-width, initial-scale=1.0" name="viewport"> 
<meta content="" name="description"> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/bootstrap-responsive.min.css"> 
<style> 
    .container { 
     margin-top: 80px; 
    } 
    #main-form { 
     margin: auto; 
     width: 500px; 
    } 
    .profile-photo { 
     vertical-align: middle; 
    } 
    .form { 
     text-align: center; 
    } 
    .profile-image { 
     width: 100%; 
     height: 100%; 
    } 
</style>

<body> 
    <div class="container"> 
     <div class="row text-center"> 
      <img src="img/slider/1.jpg" width="250px" height="250px" /> 
     </div> 
     <div class="row text-center"> 
      <h2>Create your account</h2> 
     </div> 
     <div class="row"> 
      <div id="main-form"> 
       <div class="span2"> 
        <div class="profile-photo"> 
         <img class="profile-image" src="img/slider/1.jpg" /> 
        </div> 
       </div> 
       <div class="span3 form"> 
         <div class="widget-container widget-box4"> 
         <div class="control-group"> 
          <div class="controls"> 
           <input type="text" id="inputEmail" placeholder="Username"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <div class="controls"> 
           <input type="text" id="inputEmail" placeholder="Email"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <div class="controls"> 
           <input type="password" id="inputPassword" placeholder="Password"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <div class="controls"> 
           <input type="password" id="inputPassword" placeholder="Confirm Password"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <div class="controls"> 
           <input type="checkbox"> Remember me 
          </div> 
         </div> 
         <div class="control-group"> 
          <div class="controls"> 
           <button type="submit" class="btn">Sign in</button> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <script src="js/jquery-1.9.1.min.js"></script> 
    <script src="js/bootstrap.min.js"> 
    <script type="text/javascript"> 
     $('.carousel').carousel(); 
    </script> 
</body>

我想它在頁面的中間，我的桌面變得正確。

但問題是形式和配置文件圖像不在中心。

請幫我怎麼做？

這項工作更受讚賞。

來源

2013-03-26 Sanganabasu

你可以請張貼測試頁..？ – Shail 2013-03-26 10:58:48

-1

我已經對您的代碼進行了更改，請注意，對於手機佈局可能小於500像素，您提到了您的容器之一，因此您的佈局會受到手機干擾，請儘量使用自定義媒體查詢。結構看看變化...

<body> 
    <div class="container"> 
     <div class="row text-center"> 
      <img src="img/slider/1.jpg" width="250px" height="250px" /> 
     </div> 
     <div class="row text-center"> 
      <h2>Create your account</h2> 
     </div> 
      <div id="main-form" class="row"> 
       <div class="span5"> 
        <div class="profile-photo"> 
         <img class="profile-image" src="img/slider/1.jpg" /> 
        </div> 
       </div> 
       <div class="span7 form"> 
         <div class="widget-container widget-box4"> 
         <div class="control-group"> 
          <div class="controls"> 
           <input type="text" id="inputEmail" placeholder="Username"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <div class="controls"> 
           <input type="text" id="inputEmail" placeholder="Email"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <div class="controls"> 
           <input type="password" id="inputPassword" placeholder="Password"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <div class="controls"> 
           <input type="password" id="inputPassword" placeholder="Confirm Password"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <div class="controls"> 
           <input type="checkbox"> Remember me 
          </div> 
         </div> 
         <div class="control-group"> 
          <div class="controls"> 
           <button type="submit" class="btn">Sign in</button> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
    </div> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="assets/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     $('.carousel').carousel(); 
    </script> 
</body>

來源

2013-03-26 07:47:57 SaurabhLP

使用期，使用引導程序響應引導響應以下圖片，我初學者使用引導響應爲平板電腦和手機

回答

相關問題