窗体无法响应时，减少最小的屏幕

我有一个简单的表单，我希望它能够响应，即使是最小的屏幕，如Iphone 5.当它在大屏幕上时，它没有问题，但当它减少时会破坏形成。什么是如何使表单响应的技巧。什么是最快捷的方法呢？窗体无法响应时，减少最小的屏幕

html, body{ 
 
    font-family: Helvetica; 
 
    font-size: 12px; 
 
} 
 
.center_div{ 
 
    margin: 0 auto; 
 
    width: 40%; 
 
    padding: 10px; 
 
}

<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Chinese</title> 
 
    <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 class="container center_div"> 
 
     <div class="row"> 
 
       <div class="panel panel-danger login"> 
 
        <div class="panel-heading"> 
 
         <h3 class="text-center title">China</h3> 
 
        </div> 
 
        <br> 
 
        <div class="container-fluid"> 
 
         <div class="panel-body"> 
 
          <div class = "form-group"> 
 
           <label>Username</label> 
 
           <div class="input-group margin-bottom-sm"> 
 
           <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span> 
 
            <input type="text" id="id" name="email" class = "form-control"> 
 
           </div> 
 
          </div> 
 
          <div class = "form-group"> 
 
           <label>Password</label> 
 
           <div class="input-group margin-bottom-sm"> 
 
           <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span> 
 
            <input type="password" id="password" name="password" class = "form-control"> 
 
           </div> 
 
          </div> 
 
          <div class = "form-group"> 
 
           <label>No</label> 
 
           <div class="input-group margin-bottom-sm"> 
 
           <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span> 
 
            <input type="password" id="password" name="password" class = "form-control"> 
 
           </div> 
 
          </div> 
 
          <br> 
 
          <a href="#" class="btn btn-danger btn-block">Login</a> 
 
          <br> 
 
         </div> 
 
        </div> 
 
       </div> 
 
     </div> 
 
    </div> 
 
</body>

来源

2017-08-07 Joseph

必须使用COL-LG/MD/SM/XS-N，COL-LG/MD/SM/XS-偏移-N类在DIV而不是宽度：40％ ; 见https://getbootstrap.com/examples/grid/。使用具有12个单元的水平网格。您可以为每个屏幕定义单元格宽度和偏移量：extrasmall，small，medium，large。

https://jsfiddle.net/ej59s3jt/

<style> 
html, body{ 
    font-family: Helvetica; 
    font-size: 12px; 
} 
.center_div{ 
    margin: 0 auto; 
    padding: 10px; 
} 
</style> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Chinese</title> 
    <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 class="container center_div"> 
    <div class="row"> 
     <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0 "> 
      <div class="panel panel-danger login"> 
       <div class="panel-heading"> 
        <h3 class="text-center title">China</h3> 
       </div> 
       <br> 
       <div class="container-fluid"> 
        <div class="panel-body"> 
         <div class = "form-group"> 
          <label>Username</label> 
          <div class="input-group margin-bottom-sm"> 
          <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span> 
           <input type="text" id="id" name="email" class = "form-control"> 
          </div> 
         </div> 
         <div class = "form-group"> 
          <label>Password</label> 
          <div class="input-group margin-bottom-sm"> 
          <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span> 
           <input type="password" id="password" name="password" class = "form-control"> 
          </div> 
         </div> 
         <div class = "form-group"> 
          <label>No</label> 
          <div class="input-group margin-bottom-sm"> 
          <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span> 
           <input type="password" id="password" name="password" class = "form-control"> 
          </div> 
         </div> 
         <br> 
         <a href="#" class="btn btn-danger btn-block">Login</a> 
         <br> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2017-08-07 13:44:14

感谢。请提出我的问题 – Joseph

窗体无法响应时，减少最小的屏幕

回答

相关问题