如何使表单变得响应式

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 属性中使用哈希 (#( 的一个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>