Aligning fields with bootstrap inline-forms

Navigation
1

Good afternoon!

I do not have much experience with frontend, but I will have to turn around to finish a project, so I will need a little help.

My question is, I have some forms on the screen, and I would like it to be aligned one underneath the other, but I can not do 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 that scaffolding from visual studio uses 

<divclass="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>
                                  Come back              

    
asked by anonymous 27.08.2018 / 19:22

1 answer

0

If you want each input to have the same size and alignment one below the other with 3 input per line you have to define for each form-group 3 div with class col-md-4 , each line of your form by default has the size of col-md-12 ... (12) 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 line 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 one column per line use. 

<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 line.

    
27.08.2018 / 21:08
Does Swagger 3.x work with .net 4.7? How to detect that text has created new lines