Aligning fields with bootstrap inline-forms

Question

Aligning fields with bootstrap inline-forms

Good afternoon!

I don't have much experience with frontend, but I'll have to turn around to finish a project, so I'll need a little help.

My doubt is, I have some forms on the screen, and I would like it to be lined up below each other, but not getting it at all.

As you can see, speed and summary I can not align, besides tb can not standardize the size of the fields.

I'm using css 3 which visual studio scaffolding uses

        <div class="form-inline">
            <div class="form-group">
                    @Html.LabelFor(model => model.Barco.Nome, htmlAttributes: new { @class = "control-label col-md-4" })

                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Barco.Nome, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Barco.Nome, "", new { @class = "text-danger" })
                    </div>
    <div class="form-group">
            @Html.LabelFor(model => model.Barco.SapId, htmlAttributes: new { @class = "control-label col-md-4" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Barco.SapId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Barco.SapId, "", new { @class = "text-danger" })
            </div>
        </div>
div class="form-group">
        @Html.LabelFor(model => model.Barco.CapacidadeAgua, htmlAttributes: new { @class = "control-label col-md-10" })
        <div class="col-md-8">
            @Html.EditorFor(model => model.Barco.CapacidadeAgua, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.CapacidadeAgua, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Barco.CapacidadeOleo, htmlAttributes: new { @class = "control-label col-md-5" })
        <div class="col-md-11">
            @Html.EditorFor(model => model.Barco.CapacidadeOleo, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.CapacidadeOleo, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Barco.Velocidade, htmlAttributes: new { @class = "control-label col-md-4" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Barco.Velocidade, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.Velocidade, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Barco.Resumo, htmlAttributes: new { @class = "control-label col-md-6" })
        <div class="col-md-7">
            @Html.EditorFor(model => model.Barco.Resumo, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.Resumo, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Barco.Setor, htmlAttributes: new { @class = "control-label col-md-4" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Barco.Setor, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.Setor, "", new { @class = "text-danger" })
        </div>
    </div>

Return

1

asp.net-mvc visual-studio-2017 twitter-bootstrap front-end

Author: Janson, 2018-08-27

Source

1 answers

score 0 · Answer 1

If you want each input to have the same size and alignment one below the other with 3 inputs per line you have to set for each form-group 3 div with Class col-md-4, each row of your form by default has the size of col-md-12 ... (12) it is equivalent to 12 columns of a table. when you create a div that has col-md-4 it will occupy 4 columns of your parent.

The code below leaves the row with 3 columns.

<div class="form-group">
    <div class="col-md-4">
        @Html.LabelFor(model => model.Barco.Nome, htmlAttributes: new { @class = "control-label col-md-12" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.Barco.Nome, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.Nome, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="col-md-4">
        @Html.LabelFor(model => model.Barco.SapId, htmlAttributes: new { @class = "control-label col-md-12" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.Barco.SapId, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.SapId, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="col-md-4">
        @Html.LabelFor(model => model.Barco.CapacidadeAgua, htmlAttributes: new { @class = "control-label col-md-12" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.Barco.CapacidadeAgua, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.CapacidadeAgua, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

But if you intend for a column by use line.

<div class="form-group">
    <div class="col-md-12">
        @Html.LabelFor(model => model.Barco.Nome, htmlAttributes: new { @class = "control-label col-md-12" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.Barco.Nome, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.Nome, "", new { @class = "text-danger" })
        </div>
    </div>  
</div>

For each row.