フォームを反応させる

Question

私はジャンボトロンの内部にフォームを作っていますが、何らかの理由でデスクトップビューで見栄えが良くなりますが、携帯電話で見るとジャンボトロンから外れます。私はコーディングにネットビーンズを使用しています。私は@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> 
 

フレームワークとしてのBootstrap使用しているあなた、...よくフレームワークのすべての使用をしないように恥だことを考えると

Answer 1

。付あなたのHTMLの再構成（ブートストラップの反応クラスとフォームコントロールを利用するために）あなたは簡単にあなたが望む応答を得ることができます。

ほとんどの場合、グリッドレイアウトには必要なものが追加されます。あなたのinputとlabel要素などBootstrapのフレームワークと最新の入力分類（telまたはemailなど）をよりよく反映するように、コードが大幅に変更されていますが、Bootplyの例は以下のとおりです。

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); 
}