How to back a label against a Checkbox

Asked

Viewed 92 times

1

Sorry for the simplicity of the problem, but I don’t know how to do it properly... I need to align the second label according to the image below where I indicated red. It needs to be indented and aligned with the first top label. Can you do this without having to create CSS classes? Someone knows how to help me?

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>
html css html5 twitter-bootstrap

2 answers

0


Without extra CSS you can use the Bootstrap grid itself. You only need to pass both labels into it div, and not leave a label alone in the div as you did. So you can share in the col-xs-1 the input, and in the 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>

  • There was a spacing of almost 1 cm between the checkbox and the 'Abels'. It is possible to remove it leaving something between 3 mm or more?

  • @Masterjr the CSS of Bootstrap 3 is very limited, to do what you want directly with his property you will not get. As you asked for a solution only with BS without using extra css you can’t do much better than this. But if you want to use CSS create a class for example called d-flex just like in BS4 and put in it display:flex. This way you can put d-flex in the Row that will have the elements inside, and remove the class col das div, would be like this http://prntscr.com/opigy1 with a line of CSS you resolve... If you want to edit the answer with this option

-1

Dude, one thing you can do but I don’t know if it would be the best practice but it would solve your problem is to put a div or a label on top of that input checkbox, getting then <label><input type='checkbox'></label>, and Dae you increase the height of this label (p.s.: at worst, just put everything in float:left;)

  • Words of the author "You can do this without having to create CSS classes?" maybe you haven’t read that part of his question...

  • understand how to create class being for example <a href='#' class='xxx'> and later in css . xxx { /cods }, what I said is just a matter of manipulation, he doesn’t want to create class, but he didn’t say he didn’t want to mess with css

  • He’s using Bootstrap, maybe that’s why he made it clear he didn’t want extra css, but understand it however you want...

  • then from a better guess

Browser other questions tagged html css html5 twitter-bootstrap

You are not signed in. Login or sign up in order to post.