Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Comentario no meio do HTML

Fala galera, tranquilo ?

No código do formulário, conforme é passado na aula, existe um "bug" no HTML5 que na hora de separar os radios do select

    <div class="grupo-radio">
        <div class="radio">
            <label>
                <input type="radio" name="Tipo de pessoa" checked="">
                Pessoa Física
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="Tipo de pessoa">
                Pessoa Jurídica
            </label>
        </div>
    </div><!--

    --><select class="contato-select form-control">
        <option disabled selected>Tipo de situação</option>
        <option>Apartamento</option>
        <option>Casa</option>
        <option>Castelo</option>
        <option>Mansão</option>
    </select>

    <button type="button" class="btn btn-primary" type="submit">Enviar</button>

realmente, não existe outro jeito de separar esses comando sem ser inserir esse comentário no meio deles ?

9 respostas

Caio, você pode postar o código inteiro da página?

Tenta colocar um margin no elemento usando css...

select{
    margin-top: 10px;
}

Esse e todo a section do código.

<section class="container">
    <h2>Contato</h2>
    <p>Entre em contato conosco</p>

    <form>
        <div class="form-group">
            <label for="Nome" >Nome:</label>
            <input class="form-control" id="Nome" type="text" placeholder="Seu nome">
        </div>
        <div class="form-group">
            <label for="Email" >E-mail:</label>
            <div class="input-group">
              <div class="input-group-addon">@</div>
                <input class="form-control" id="Email" type="email" placeholder="Seu e-mail">
            </div>
        </div>

    <div class="grupo-radio">
        <div class="radio">
            <label>
                <input type="radio" name="Tipo de pessoa" checked="">
                Pessoa Física
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="Tipo de pessoa">
                Pessoa Jurídica
            </label>
        </div>
    </div><!--

    --><select class="contato-select form-control">
        <option disabled selected>Tipo de situação</option>
        <option>Apartamento</option>
        <option>Casa</option>
        <option>Castelo</option>
        <option>Mansão</option>
    </select>

    <button type="button" class="btn btn-primary" type="submit">Enviar</button>

    </form>

</section>

Caio, não entendi qual o "bug" a que você se refere. Aqui, aparentemente, seu código está funcionando. Pode explicar melhor?

O fato de você ter que utilizar o comentário entre a div e o select

</div><!--

    --><select class="contato-select form-control">

Não precisa de comentários entre esses elementos, engloba o select eu um dia tbm e já era, dar vc tbm aplicar um css de margin-top nesse div com o kaic sugeriu ai em cima

Corrigindo: Não precisa de comentários entre esses elementos, engloba o select em um div tbm e já era, dae vc tbm aplica um css de margin-top nesse div com o Kaic sugeriu ai em cima

solução!

Eu acabei fazendo por meio de grid e deu certo!

<section id="conosco" class="container">
            <h2>Contato</h2>
            <p>Entre em contato conosco</p>

            <form>
                <div class="form-group">
                    <label for="#Nome" >Nome:</label>
                    <input class="form-control" id="Nome" type="text" placeholder="Seu nome">
                </div>
                <div class="form-group">
                    <label for="#Email" >E-mail:</label>
                    <div class="input-group">
                        <div class="input-group-addon">@</div>
                        <input class="form-control" id="Email" type="email" placeholder="Seu e-mail">
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-6 grupo-radio">
                        <div class="row">
                            <div class="col-xs-12 radio">
                                <label>
                                    <input type="radio" name="Tipo de pessoa" checked="">
                                    Pessoa Física
                                </label>
                            </div>
                            <div class="col-xs-12 radio">
                                <label>
                                    <input type="radio" name="Tipo de pessoa">
                                    Pessoa Jurídica
                                </label>
                            </div>
                            <div class="col-xs-12">
                                <button type="button" class="btn btn-primary" type="submit">Enviar</button>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-6 contato-select pull-right">
                        <select class="form-control">
                            <option disabled selected>Tipo de situação</option>
                            <option>Apartamento</option>
                            <option>Casa</option>
                            <option>Castelo</option>
                            <option>Mansão</option>
                        </select>
                    </div>
                </div>
            </form>

        </section>

boa

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software