Aligning fields with bootstrap inline-Forms

Asked

Viewed 451 times

1

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 question is, I have a few presses on the screen, and I would like it to be aligned under each other, but I can’t get it for you at all.

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

I’m using the css 3 that the visual studio scaffolding uses

Imagem forms

        <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>
Come back

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

  • Dude you have to put col-Md-12 in EVERYTHING. Any class that is with col-Md-XX vc should replace the number by 12 getting all classes with col-Md-12, this can help you, because looking at the top seems meaningless the way you used the values of these columns of the grid..., but as you want everything in a column only using col-Md-12 must resolve...

  • Got it, thanks for the help. It was like I said, I only do backend, I’m doing front, because there’s no one. But taking the opportunity, what was the point in putting the columns in 12? I know you have the division that bootstrap does, but I never got it right

  • Here’s the official Bootstrap Grid documentation. It is very easy to understand, it is worth stopping 5 min to read https://getbootstrap.com/docs/4.0/layout/grid/ vc you will see that for example two Divs with the class col-Md-6 will generate two equal columns with width of 50% each. Already two columns with col-Md-12, will generate only one column, with each div occupying 100% of the width.

1 answer

0

If you want each input to have the same size and alignment below each other with 3 input per line you have to set for each form-group 3 div classy col-md-4, each row 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 she had occupied 4 columns of her father.

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 want to put one column per row 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.

  • Oops, thanks! .

  • @Janson, if the answer solved your problem just accept it as the correct answer.

Browser other questions tagged asp.net-mvc twitter-bootstrap front-end visual-studio-2017

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