3

Gostaria de uma dica de como colocar dois campos na mesma linha no Razor, usando o bootstrap em uma aplicação ASP.NET MVC5.

div class="ibox-content">
                            <form role="form" class="form-inline">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Nm_EquipeMinima, new { @class = "control-label col-md-2" })
                                    <div class="col-md-6">
                                        @Html.EditorFor(model => model.Nm_EquipeMinima)
                                        @Html.ValidationMessageFor(model => model.Nm_EquipeMinima)
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.Nr_EquipeMinima, new { @class = "control-label col-md-2" })
                                    <div class="col-md-6">
                                        @Html.EditorFor(model => model.Nr_EquipeMinima)
                                        @Html.ValidationMessageFor(model => model.Nr_EquipeMinima)
                                    </div>
                                </div>
                            </form>
                        </div class="ibox-content">

Este é o meu código e abaixo o resultado.

imagem da dúvida

2 Respostas 2

2

No Bootstrap, tenha em mente que o todo espaço é divisível por 12 ou múltiplos de 12.

Quando você faz:

<div class="form-group">
    @Html.LabelFor(model => model.Nm_EquipeMinima, new { @class = "control-label col-md-2" })
    <div class="col-md-6">
        @Html.EditorFor(model => model.Nm_EquipeMinima)
        @Html.ValidationMessageFor(model => model.Nm_EquipeMinima)
    </div>
</div>

Seu form-group ocupa os 12 espaços. Seu label ocupa 2 espaços (@class = "col-md-2") e seu @Html.EditorFor ocupa 6 espaços (div class="col-md-6"). Ainda sobrariam 4 espaços para colocar mais alguma coisa na linha.

A forma de fazer isso é colocando todos os componentes dentro do mesmo form-group, assim:

<div class="form-group">
    @Html.LabelFor(model => model.Nm_EquipeMinima, new { @class = "control-label col-md-1" })
    <div class="col-md-5">
        @Html.EditorFor(model => model.Nm_EquipeMinima)
        @Html.ValidationMessageFor(model => model.Nm_EquipeMinima)
    </div>
    @Html.LabelFor(model => model.Nr_EquipeMinima, new { @class = "control-label col-md-1" })
    <div class="col-md-5">
        @Html.EditorFor(model => model.Nr_EquipeMinima)
        @Html.ValidationMessageFor(model => model.Nr_EquipeMinima)
    </div>
</div>                  

Repare que tenho dois label com col-md-1 e duas div com col-md-5. Seria 1 + 1 + 5 + 5 = 12. Ou seja, coloco assim todos os campos na mesma linha ocupando os 12 espaços disponíveis pelo framework.

Veja uma explicação sobre o sistema de grids aqui.

2

Erison, fiz algumas pequenas alterações no seu html, onde adicionei um div com class row e os divs onde eram form-group coloquei col-md-6, acredito que isso seja o suficiente no seu caso.

Você pode ver melhor sobre o uso dos col-... no link

<div class="ibox-content">
    <form role="form" class="form-inline">
        <div class="row form-group">
            <div class="col-md-6">
                @Html.LabelFor(model => model.Nm_EquipeMinima, new { @class = "control-label col-md-2" })
                <div class="col-md-6">
                    @Html.EditorFor(model => model.Nm_EquipeMinima)
                    @Html.ValidationMessageFor(model => model.Nm_EquipeMinima)
                </div>
            </div>

            <div class="col-md-6">
                @Html.LabelFor(model => model.Nr_EquipeMinima, new { @class = "control-label col-md-2" })
                <div class="col-md-6">
                    @Html.EditorFor(model => model.Nr_EquipeMinima)
                    @Html.ValidationMessageFor(model => model.Nr_EquipeMinima)
                </div>
            </div>
        </div>
    </form>
</div>
2
  • Nas divs de dentro, ainda tem mais 4 espaços cada que podem ser utilizados. Desta forma fica meio feião porque os blocos ficarão alinhados à esquerda. 26/07/2016 às 19:37
  • 1
    mas o label fica em cima do input, então seria só mudar o div col-md-6 para 12 e tirar o form-inline ai fica bonitão :) 26/07/2016 às 19:39

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 .