Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Não consigo exibir uma DIV e um Selector na mesma linha

Referente ao curso Bootstrap: criação de uma single-page responsiva, no capítulo Criando o formulário de contato colocando o vídeo institucional da empresa e atividade Finalizando o formulário de contato

por Martins Isata Domingos
| 220.1k xp | 71 posts
Técnico de Implementação SI

Boas caros,

Estou seguindo as outros de bootstrap, e julgo que seguir os passo apresentado nas aulas. Porém, não é aparece na mesma linha as minha DIV e o Selector, podem ajudar:

HTML:

<div class="group-radio">
                    <div class="radio">
                        <label>
                            <input type="radio" name="tipo-pessoa" checked="">Pessoa Física
                        </label>
                    </dir>
                    <div class="radio">
                        <label>
                            <input type="radio" name="tipo-pessoa"> Pessoa Juridica
                        </label>
                    </div>
                </div>

                <!-- 

                    -->    

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

CSS:

.group-radio,
.contacto-select  {
    width: 50%;
    display:inline-block; 
    vertical-align: top;
}

.group-radio .radio:first-child {
    margin-top: 0;
}
5 respostas
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Martins, tudo bem?

A primeira <div class="radio"> está fechando só no final do seu código HTML, isso pq logo abaixo dela voce tentou fechar com </diR>.

Corrige pra </div> normal e depois da um retorno se está ok? Se nao corrigir tira um print do problema e manda o link aqui? Só subir a imagem no https://imgur.com/.

Espero ter ajudado,

Abcs!

por Martins Isata Domingos
| 220.1k xp | 71 posts
Técnico de Implementação SI

Boas Natan,

Mesmo assim, prevalece,

Aqui a imagem

por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Martins,

Achei!

O instrutor em aula criou a classe GRUPO-RADIO, e nao group-radio como estavamos achando que era!

Outro ponto é a classe contato-select, que está contact-select no seu codigo.

Fazendo essas correcoes fica igual da aula, como testei nesse Jsbin aqui.

Da uma testada e da um feedback aqui se funcionou?

Abcs!

por Martins Isata Domingos
| 220.1k xp | 71 posts
Técnico de Implementação SI

Boas Natan,

Acho que os nomes das classes são indiferentes. Mesmo que eu utilizar XPTO , ele funciona se eu utilizar o mesmo nome dentro do meu arquivo CSS. Para o meu caso está

group-radio e .contato-select

Mas eu utilizei no meu arquivo CSS, o mesmo nome:

#painel-sobre {
    margin-top: 20px;
}

.titlo-depoimento {
    background-color: #0275d8;
    padding-top: 25px;
    padding-bottom: 50px;
    color: #fff;
    margin-bottom: 0;
    font-size: 24px


}

.group-radio,
.contato-select  {
    width: 50%;
    display:inline-block; 
    vertical-align: top;
}

.group-radio .radio:first-child {
    margin-top: 0;
}
solução!
por Martins Isata Domingos
| 220.1k xp | 71 posts
Técnico de Implementação SI

Boas Caros,

Situação ficou resolvida atribuindo o valor 49% no width, no meu CSS:

group-radio,
.contacto-select  {
    width: 49%;
    display:inline-block; 
    vertical-align: top;
}

.group-radio .radio:first-child {
    margin-top: 0;
}