Make form responsive

Question

Ich mache ein Formular innerhalb von Jumbotron und aus irgendeinem Grund bekomme ich es auf der Desktop-Ansicht gut aussehen, aber wenn es mobile anzeigen geht es aus dem Jumbotron. Ich benutze Netbeans, um meine Programmierung zu machen. Ich benutze sogar @media (max-width: 620px). Ich habe versucht, Google mit aber nicht :(

#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

Da Sie verwenden Bootstrap als Rahmen es eine Schande, scheint keinen Gebrauch von allen gut ... Rahmen zu machen. Mit einige Umstrukturierung Ihres HTML (Verwendung von Bootstrap der reaktions Klassen und Formular-Steuerelemente machen) Sie bequem die Ansprechempfindlichkeit erzielen können Sie sich wünschen.

davon die meisten nur die notwendige .col-*-* für Rasterlayouts hinzugefügt und natürlich Bootstrap Klassen Anwendung Ihre input und label Elemente, etc. Ein Beispiel Bootply ist unten, obwohl der Code signifikant geändert wird, um Bootstrap-Framework und moderne Eingabe-Klassifikationen (wie tel oder email, etc.) besser zu reflektieren.

http://www.bootply.com/mPNCZyXbbD

Die 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> 

Und die CSS:

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