2

Sou iniciante de HTML/CSS/Bootstrap e estou com uma dúvida sobre como colocar dois componentes checkbox dentro algum tipo de container com um título. Estou fazendo da maneira correta ou há outra maneira melhor de se fazer? Meus componentes ficam assim:

inserir a descrição da imagem aqui

Mas eu gostaria que ficassem assim:

inserir a descrição da imagem aqui

<div class="panel">
    <div class="panel-body container-fluid pt-10 pl-15 pr-15">
        <div class="form-horizontal">
            <vc:summary />
            <div class="form-horizontal">
                <div class="col-md-12">
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label asp-for="Descricao" class="control-label">Descrição</label>
                            <input asp-for="Descricao" class="form-control text-uppercase" />
                            <span asp-validation-for="Descricao" class="text-danger"></span>
                        </div>
                        <label class="control-label">Aplicar a:</label>
                        <div class="col-md-3">
                            <div class="float-left mr-20">
                                <input type="checkbox" class="mycheckbox" data-plugin="switchery"
                                       checked />
                            </div>
                            <label class="pt-3" for="inputBasicOn">Pessoa Física</label>
                        </div>
                        <div class="col-md-3">
                            <div class="float-left mr-20">
                                <input type="checkbox" class="mycheckbox" data-plugin="switchery"
                                       checked />
                            </div>
                            <label class="pt-3" for="inputBasicOn">Pessoa Jurídica</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Sei que deve ser um procedimento muito simples, mas eu não sei como fazer da melhor forma possível. Alguém saberia como me ajudar a corrigir?

Um abraço a todos!

4
  • Qual versão do bootstrap?
    – hugocsl
    16/11/2018 às 23:41
  • Olá @hugocsl! v3.3.7 :)
    – Master JR
    16/11/2018 às 23:49
  • Tem id's duplicados: id="mycheckbox"
    – Sam
    17/11/2018 às 0:06
  • Ah tah, desconsidere-os... eu fiz alterações e os removi... Vou atualizar o post. I'm sorry rssr
    – Master JR
    17/11/2018 às 0:11

1 Resposta 1

1

Seu modelo de imagem parece que tem uns estilos de CSS a mais do que o padrão normal do Bootstrap, mas de qualquer forma fiz esse modelo que pode te ajudar.

O macete aqui é separa o chackbox e a label dele em uma div, e na última coluna onde não vai ter o "título" sobre o input vc deixa o label sem conteúdo tipo um &nbsp; e resolve. Eu não gosto muito desse tipo de solução, mas como é um framework as vezes esse tipo de solução resolve sem maiores problemas.

Veja como ficou. Exiba em "Página toda" tb para ver um melhor resultado.

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <div class="panel">
        <div class="panel-body container-fluid pt-10 pl-15 pr-15">
            <div class="form-horizontal">
               
                <div class="form-horizontal">
                    <div class="col-md-12">
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label asp-for="Descricao" class="control-label">Descrição</label>
                                <input asp-for="Descricao" class="form-control text-uppercase" />
                                <span asp-validation-for="Descricao" class="text-danger"></span>
                            </div>
                            <div class="col-md-3">
                              <label class="control-label">Aplicar a:</label>
                                  <div>
                                  
                                    <input type="checkbox" class="mycheckbox" data-plugin="switchery"
                                    checked />
                                    <label class="pt-3" for="inputBasicOn">Pessoa Física</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                <label class="control-label" style="color: transparent">&nbsp;</label>
                                <div>
                                  <input type="checkbox" class="mycheckbox" data-plugin="switchery" checked />
                                  <label class="pt-3" for="inputBasicOn">Pessoa Jurídica</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

3
  • 1
    Obrigado @hugocsl !!!!!! Funcionou show de bola. Como eu não manjo muito bem da parte de Front End, eu estou usando um framework chamado Remark que é muito bom. Dá para estilizar muita coisa sem ter que ficar criando muitos CSS's com parangolês rsrssrsr Valeu pela ajuda! :)
    – Master JR
    17/11/2018 às 14:49
  • @MasterJR legal que deu certo ai. Framework é para ser usado mesmo rss, Esse Remark parece interessante vou procurar saber mais sobre ele tb
    – hugocsl
    17/11/2018 às 16:07
  • É muito bom @hugocsl!!! Vc vai gostar!!!
    – Master JR
    18/11/2018 às 12:12

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 .