1

Então, eu tenho 2 campos de texto e tenho 4 checkBox que funcionam como switch. Eu não estou conseguindo colocar os checkbox ao lado dos campos de texto. Minha ideia é agrupar os checkbox em 4, ao lado desses campos de texto.

Segue imagem para ter uma ideia:

inserir a descrição da imagem aqui

<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.Id)
<div class="container">
    <div class="card" style="margin:50px 0">
        <div class="card-header">Editar Código e sub-códigos</div>
        <div class="form-group">
            <div class="form-group col-md-6">
                @Html.LabelFor(model => model.Codigo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-6">
                    @Html.EditorFor(model => model.Codigo, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Codigo, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group col-md-6 ">
                @Html.LabelFor(model => model.Descricao, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-6">
                    @Html.EditorFor(model => model.Descricao, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-row ">
                <div class="form-group">
                    <div class="card align-items-center" style="margin:20px 10px 10px 10px">
                        <div class="card-header">ExibirInfoPosicionamento</div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <label class="switch ">
                                    @Html.CheckBoxFor(model => model.Ativo)
                                    <span class="slider"></span>
                                </label>

                            </li>
                        </ul>
                        <div class="form-group ">
                            <div class="card-header">Ativo</div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <label class="switch ">
                                        @Html.CheckBoxFor(model => model.Ativo)
                                        <span class="slider"></span>
                                    </label>

                                </li>
                            </ul>
                        </div>
                        <div class="card-header">Ativo</div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <label class="switch ">
                                    @Html.CheckBoxFor(model => model.Ativo)
                                    <span class="slider"></span>
                                </label>

                            </li>
                        </ul>
                        <div class="card-header">ExibirInfoMeteorologica</div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <label class="switch ">
                                    @Html.CheckBoxFor(model => model.Ativo)
                                    <span class="slider"></span>
                                </label>
                            </li>
                        </ul>
                    </div>                        
                </div>
            </div>
        </div>              
      </div>             
   </div>
2
  • Amigo Bootstrap 3 ou 4? Como pretende alinhar da forma que falou se um grupo é de 3 btns e o outro só tem 1? Seu código está meio complicado de entender. Vc poderia pegar o HTML que é renderizado direto na página, da um CTRL+U lá e pega o código e coloca aqui, acho que fica melhor para gente pode simular seu problema
    – hugocsl
    Commented 30/01/2019 às 20:07
  • @hugocsl então, eu vou agrupar os 4 botoes a direita dos forms, concordo que ficou meu confuso, vou pegar o html puro
    – Jhensen
    Commented 30/01/2019 às 23:31

1 Resposta 1

1

Dei uma modificada na estrutura do html, tenta assim vê se da certo!

Se der certo, veja como eu dividi as divs, uma principal flex, e as outras duas que irão ficar lado a lado, uma com mr-auto e ml-auto.

Testa ai e me fala que por que esses codigos em c# está quebrando o html aqui!

<div class="form-horizontal">
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Id)
    <div class="container">
        <div class="card" style="margin:50px 0">
            <div class="card-header">Editar Código e sub-códigos</div>
                <div class="card-body" style="display: flex">
                    <div class="ml-auto">
                        <div class="form-group col-md-6">
                            @Html.LabelFor(model => model.Codigo, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-6">
                                @Html.EditorFor(model => model.Codigo, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Codigo, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group col-md-6 ">
                            @Html.LabelFor(model => model.Descricao, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-6">
                                @Html.EditorFor(model => model.Descricao, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                    <div class="mr-auto">
                        <div class="form-row ">
                            <div class="form-group">
                                <div class="card align-items-center" style="margin:20px 10px 10px 10px">
                                    <div class="card-header">ExibirInfoPosicionamento</div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">
                                            <label class="switch ">
                                                @Html.CheckBoxFor(model => model.Ativo)
                                                <span class="slider"></span>
                                            </label>

                                        </li>
                                    </ul>
                                    <div class="form-group ">
                                        <div class="card-header">Ativo</div>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item">
                                                <label class="switch ">
                                                    @Html.CheckBoxFor(model => model.Ativo)
                                                    <span class="slider"></span>
                                                </label>

                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-header">Ativo</div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">
                                            <label class="switch ">
                                                @Html.CheckBoxFor(model => model.Ativo)
                                                <span class="slider"></span>
                                            </label>

                                        </li>
                                    </ul>
                                    <div class="card-header">ExibirInfoMeteorologica</div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">
                                            <label class="switch ">
                                                @Html.CheckBoxFor(model => model.Ativo)
                                                <span class="slider"></span>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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 .