1

Bom dia, pessoal!

Sou iniciante no jQuery e no Bootstrap, e estou com algumas dificuldades ao utilizar os dois simultaneamente.

Eu estou querendo gerar um botão que, ao clicar, exiba um pequeno formulário para inserção de e-mail. Porém, só está funcionando quando a janela encontra-se em tamanho mobile (menor que 768px), em resoluções maiores, o botão fica desabilitado e o código não funciona.

Aqui está o meu código resumido:

[...]
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nome da Página</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(window).load(function(){
            $('#toggle-form-acesso').click(form_toggle);
            $('#form-acesso').hide();
        });

        function form_toggle(){
            $("#form-acesso").toggle('swing');
        }
    </script>
</head>

<body>
[...]
<div id="apresentacao" class="col-sm-8 col-sm-offset-4">
    <button type="button" id="toggle-form-acesso">Cadastrar e-mail</button>
        <form id="form-acesso" action="" method="post">
            <label>E-mail:</label>
            <input class="field-text" type="text" name="email" id="email" placeholder="[email protected]" required/>
            <input class="botao-login" type="submit" value="Solicitar acesso" />                
        </form>
[...]

Fiz algo errado? Alguém sabe o que pode estar acontecendo?

Muito obrigado! :D

2
  • Na div apresentacao, você só usou os parametros da classe col-sm, já tentou fazer para todos, tipo o exemplo ficaria class="col-xs-6 col-sm-6 col-md-6 col-lg6" Sendo o XS responsável para formatos no mobile com a resolução pequena. Recomendo a leitura deste: webdevacademy.com.br/tutoriais/ux/… 14/07/2016 às 12:36
  • Pode mostrar o código completo ? Não identifiquei o erro só com os trechos. 14/07/2016 às 13:07

1 Resposta 1

0

O que parece estar errado, é que vc n colocou uma classe de controle para forms do bootstrap, geralmente vc pode usar a classe .form-group para trabalhar com forms.

Aqui adicionei as classes, tente usa-las no seu codigo e veja se no seu contexto eles funcionarão.

   <div id="apresentacao" class="form-group col-sm-8 col-sm-offset-4">
    <button class="btn btn-primary" type="button" id="toggle-form-acesso">Cadastrar e-mail</button>
    <form class="form-group" id="form-acesso" action="#" method="post" >
        <label for="email">E-mail:</label>
        <input class="field-text form-control" type="text" name="email" id="email" placeholder="[email protected]" required/>
        <input class="botao-login btn btn-success form-control" type="submit" value="Solicitar acesso" />                
    </form>
</div>

Separei o codigo que vc colocou no seu exemplo e ele n apresenta o disable em resoluções menores que vc mencionou, ficando normal.

Neste link o proprio bootstrap lhe avisa sobre o controle da classe com o titulo de inline form para trabalhar com campos um ao lado do outro e nele há um aviso sobre a resolução de 768px, de uma lida e veja se algum pedaço acima do seu codigo existe ou falta algo para que funcione corretamente. http://getbootstrap.com/css/#forms

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .