使窗体响应

Question

我正在制作一个窗体内部的jumbotron，由于某种原因，我在桌面视图上看起来不错，但是在查看它移动时，它会跳出大窗户。我使用netbeans来完成我的编码。我甚至使用@media（max-width：620px）。我尝试使用谷歌，但未能:(

#wrapper{ 
 
     width: 500px; 
 
     height: 700px; 
 
     position: relative; 
 
     margin: 0 auto; 
 
     background-color: rgba(255,255,255,.75); 
 
     text-align: center; 
 
     
 
    } 
 
    form{ 
 
     color: black; 
 
     text-align: center; 
 
     
 
    } 
 
    div{ 
 
     clear: both; 
 
    } 
 
    #off{ 
 
     background-color: rgba(225,0,0,.85); 
 
     color: white; 
 
     width: 525px; 
 
     height: 140px; 
 
     font-size: 1rem; 
 
     text-align: center; 
 
    } 
 
    
 
    .formHeader{ 
 
     color: #104c8b; 
 
    } 
 
    .formFooter{ 
 
     background-color: rgba(0,0,255,.5); 
 
     color: white; 
 
     margin: 65px 0 0 0; 
 
    } 
 
    
 
    @media(max-width: 620px) { 
 
     
 
     #wrapper{ 
 
     width: 100px; 
 
     height: 100px; 
 
     position: relative; 
 
     margin: 0 auto; 
 
     background-color: rgba(255,255,255,.75); 
 
     text-align: center; 
 
     
 
    }

<section id="top" class="jumbotron"> 
 
      <div class="container-fluid"> 
 
       <div class="row text-center"> 
 
        <div id="wrapper"><p>Contact Form</p> 
 
         <div class="formHeader"> 
 
          
 
         </div> 
 
       <form action="test.html" method="get" name="test" id="myForm"> 
 
        <label>Name</label><input name="name" type="text" /><br> 
 
        <label>Email</label><input name="email" type="text" /><br> 
 
        <label>Phone</label><input name="number" type="text" /><br> 
 
        <input type="submit" value="Send"/> 
 
       </form> 
 
        <div class="formFooter"> 
 
          
 
        </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     </section> 
 

Answer 1

假设你使用引导作为一个框架它似乎是一个耻辱不利用一切安好......框架的。随着对HTML进行一些重构（以利用Bootstrap的响应式类和表单控件），您可以轻松实现所需的响应性。你的input和label元素等。Bootply示例如下，但代码被显着更改以更好地反映Bootstrap的框架和现代输入分类（如tel或email等）。

http://www.bootply.com/mPNCZyXbbD

的HTML：

<section id="top" class="jumbotron"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
     <div class="form-wrapper text-center"> 
      <p>Contact Form</p> 

      <form action="test.html" method="get" name="test" id="myForm" class="form form-horizontal"> 

      <div class="form-group"> 
      <label for="name" class="col-sm-2 control-label">Name</label> 
      <div class="col-sm-10"> 
       <input name="name" type="text" class="form-control"> 
      </div> 
      </div> 

      <div class="form-group"> 
      <label for="email" class="col-sm-2 control-label">Email</label> 
      <div class="col-sm-10"> 
       <input name="email" type="email" class="form-control"> 
      </div> 
      </div> 

      <div class="form-group"> 
      <label for="email" class="col-sm-2 control-label">Phone</label> 
      <div class="col-sm-10"> 
       <input name="number" type="tel" class="form-control"> 
      </div> 
      </div> 

      <button type="submit" class="btn btn-default">Send</button> 
      </form> 

     </div> 
     </div> 
    </div> 
    </div> 
</section> 

而CSS：

.form-wrapper { 
    padding: 15px; 
    background: rgba(255,255,255,0.75); 
}