1

Desculpem a simplicidade do problema, mas não sei como fazer isso corretamente... Preciso alinhar o segundo label conforme a imagem abaixo onde indiquei de vermelho. Ele precisa ser recuado e ficar alinhado com o primeiro label superior. Dá para fazer isso sem ter que criar classes CSS? Alguém sabe como me ajudar?

inserir a descrição da imagem aqui

<div class="col-md-12 elemento-linha">
    <input asp-for="@configuracaoCampo.ConfiguracoesCamposViewModel[i].ValorBooleanoViewModel.Valor" data-plugin="switchery" data-size="small" type="checkbox" class="validar-cpf-cnpj" />
    <label asp-for="@configuracaoCampo.ConfiguracoesCamposViewModel[i].RotuloCampo" class="control-label">@configuracaoCampo.ConfiguracoesCamposViewModel[i].RotuloCampo</label>
    <div>
        <label asp-for="@configuracaoCampo.ConfiguracoesCamposViewModel[i].DescricaoCampo" class="control-label">@configuracaoCampo.ConfiguracoesCamposViewModel[i].DescricaoCampo</label>
    </div>
</div>
0

2 Respostas 2

0

Sem CSS extra vc pode usar o grid do próprio Bootstrap. Só precisa passar as duas labels para dentro da mesma div, e não deixar uma label sozinha na div como vc fez. Assim vc pode dividir na col-xs-1 o input, e na col-xs-11 as labels.

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


<div class="container">
    <div class="row">
        <div class="col-xs-1 elemento-linha">
            <input asp-for="@configuracaoCampo.ConfiguracoesCamposViewModel[i].ValorBooleanoViewModel.Valor" data-plugin="switchery" data-size="small" type="checkbox" class="validar-cpf-cnpj" />
        </div>
        <div class="col-xs-11">
            <label asp-for="@configuracaoCampo.ConfiguracoesCamposViewModel[i].RotuloCampo" class="control-label">@configuracaoCampo.ConfiguracoesCamposViewModel[i].RotuloCampo</label>
            <br>
            <label asp-for="@configuracaoCampo.ConfiguracoesCamposViewModel[i].DescricaoCampo" class="control-label">@configuracaoCampo.ConfiguracoesCamposViewModel[i].DescricaoCampo</label>
        </div>
    </div>
</div>

2
  • Ficou um espaçamento de quase 1 cm entre o checkbox e os 'labels'. É possível removê-lo deixando algo entre uns 3 mm mais ou menos?
    – Master JR
    Commented 7/08/2019 às 0:48
  • @MasterJR o CSS do Bootstrap 3 é muito limitado, para fazer o que vc quer direto com as propriedade dele vc não vai conseguir. Como vc pediu uma solução apenas com BS sem usa css extra não da para fazer muito melhor que isso. Mas se vc quiser usar CSS crie uma classe por exemplo chamada d-flex igual no BS4 e coloque nela display:flex. Dessa forma vc pode colocar d-flex na row que vai ter os elementos dentro, e retire a classe col das div, ficaria assim prntscr.com/opigy1 com uma linha de CSS vc resolve... Se quiser edite o resposta com essa opção
    – hugocsl
    Commented 7/08/2019 às 11:20
-1

cara, uma coisa que você pode fazer mas nao sei se seria a melhor pratica mas resolveria seu problema é colocar uma div ou um label em cima desse input checkbox, ficando entao <label><input type='checkbox'></label>, e dae você aumenta o height desse label (p.s.: na pior das hipóteses, só colocar tudo em float:left;)

4
  • Palavras do autor "Dá para fazer isso sem ter que criar classes CSS?" talvez vc não tenha lido essa parte da pergunta dele... Commented 6/08/2019 às 18:30
  • entendo como criar class sendo por exemplo <a href='#' class='xxx'> e posteriormente no css .xxx { //cods }, oq falei ai é só uma questão de manipulação, ele nao quer criar classe, mas nao disse que nao queria mexer com css Commented 6/08/2019 às 18:36
  • Ele está usando Bootstrap, talvez seja por isso que ele deixou claro que não queria css extra, mas entenda como quiser... Commented 6/08/2019 às 18:39
  • então de um palpite melhor Commented 6/08/2019 às 18:47

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 .