フォームを反応的にするにはどうすればいいですか？

Question

誰でも私にこのフォームを反応させる助けを与えることができますか？私はしばらくしていない成功事例の:(私は「COL-MD」のようなブートストラップクラスを使用しようとしているが、それらのいずれかが私のために働いているためにしようとしている。それを行うことはできません。:(

<section id="Contato-Site"> 

     <div id="#FormularioAl"> 

      <div class="container"> 

       <div id="formulario"> 

        <div id="formtext"> 
         <h1 id="h1simplesrapido">              SIMPLES E RÁPIDO </h1> 

        </div> 
      <h3 id="informedados">Informe seus dados abaixo e logo entraremos em contato.</h3><Br /> 
        <div class="form-group"> 

         <form> 
          <input id="formulario-Nome" type="text" class="form-control" placeholder="Nome"><br> 
          <input id="formulario-Email" type="email" class="form-control" placeholder="E-mail"><br> 
          <input id="formulario-Tel" type="tel" class="form-control" placeholder="Telefone"><br> 
          <textarea id="formulario-areatexto" class="btn-group-justified" rows="7" placeholder="Sua Mensagem"></textarea><br> 
          <input id="formulario-botaoEnviar" type="submit" class="form-control"> 
         </form> 

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

    </section> 

CSS：。

 #Contato-Site{ 
       border-top: 50px solid rgba(30,72,137,1.00); 
      } 

    #FormularioAl{ 

      padding: 0px 100px 0px 0px; 
      margin: 0px 0px 0px 0px; 


     } 

#formulario-Nome, 
     #formulario-Email, 
     #formulario-Tel, 
     #formulario-areatexto { 



     border: solid; 
     border-color: rgba(30,72,137,1.00); 
     border-width: 2px; 


     } 

     #formulario-botaoEnviar { 

      background-color: rgba(30,72,137,1.00); 
      color: white; 
      font-size: 20px; 
      text-transform: uppercase; 
      font-weight: 600; 
      height: 50px; 
     } 

Answer 1

私はこれが応答入力スタイルにそこに何の問題が表示されていないあなたはすべて見たように働いていますが、id属性にハッシュ（＃）を使用してきた1つのdivコンテナれます。

#Contato-Site { 
 
    border-top: 50px solid rgba(30, 72, 137, 1.00); 
 
} 
 

 
#FormularioAl { 
 
    padding: 0 100px 0 0; 
 
    margin: 0; 
 
} 
 

 
#informedados { 
 
    margin-bottom: 20px; 
 
} 
 

 
#formulario-Nome, 
 
#formulario-Email, 
 
#formulario-Tel, 
 
#formulario-areatexto { 
 
    border: 2px solid rgba(30, 72, 137, 1.00); 
 
} 
 

 
#formulario-botaoEnviar { 
 
    background-color: rgba(30, 72, 137, 1.00); 
 
    color: white; 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    font-weight: 600; 
 
    height: 50px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<section id="Contato-Site"> 
 
    <div id="FormularioAl"> 
 
     <div class="container"> 
 
      <div id="formulario"> 
 
       <div id="formtext"> 
 
        <h1 id="h1simplesrapido">SIMPLES E RÁPIDO </h1> 
 
       </div> 
 
       <h3 id="informedados">Informe seus dados abaixo e logo entraremos em contato.</h3> 
 
       <div class="form-group col-xs-6"> 
 
        <form> 
 
         <input id="formulario-Nome" type="text" class="form-control" placeholder="Nome"><br> 
 
         <input id="formulario-Email" type="email" class="form-control" placeholder="E-mail"><br> 
 
         <input id="formulario-Tel" type="tel" class="form-control" placeholder="Telefone"><br> 
 
         <textarea id="formulario-areatexto" class="btn-group-justified" rows="7" placeholder="Sua Mensagem"></textarea><br> 
 
         <input id="formulario-botaoEnviar" type="submit" class="form-control"> 
 
        </form> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>