gcogco10 Ответов: 1

Как сделать так, чтобы ваша входная группа была горизонтальной внутри вашей формы?


Привет Команда

Я хочу создать входную группу в своей форме. Это позволит выровнять текстовое поле справа, то есть "имя и фамилия". Посмотрите на мою логику, что я попытался, они далеки друг от друга на новой линии.

Что я уже пробовал:

@using eNtsaRegistrationTraining.Models
@model EditTrainingRegFormViewModel

@{
    ViewBag.Ttile = "Dashboard";
    Layout = "~/Views/Shared/_HomeLayout.cshtml";
}
<center>
    <div class="register-box ">
        <div class="register-logo">

        </div>

        <div class="card">
            <div class="card-body register-card-body">
                <center>
                    <img src="~/Images/eNtsa.png" />
                </center>
                <center>
                    <p>Training Course Registration:Motion MasterClass</p>
                    <hr />
                    <p>Course date: 25-27 February 2020</p>
                    <hr />
                    <p>
                        Note:Please note your registration is submit approval as seats for this course is limited. Once your registration is confirmed, you will receive a quote for subject to your confirmation
                        followed by an invoice.
                    </p>
                </center>
                <hr />
                @using (Html.BeginForm("editRegForm", "Home", FormMethod.Post, new { @role = "form" }))
                {
                    @Html.AntiForgeryToken()
            <div class="row">
                <label for="Title"> Title: </label>
                <div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">
                    <div class="input-group pull-left">
                        @Html.TextBoxFor(m => m.Title, new { @class = "form-control", type = "text", id = "title", autofocus = "autofocus", placeholder = "Title", required = "required" })
                        <div class="input-group-append">
                            <div class="input-group-text">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                    <hr />
                    <div class="row">
                        <label for="Name">Name:</label>
                        <div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">
                            <div class="input-group pull-left">
                                @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", type = "text", id = "firstname", autofocus = "autofocus", placeholder = "First Name", required = "required" })
                                <div class="input-group-append">
                                    <div class="input-group-text">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr/>

                    <div class="row">
                     <label for="LastName">LastName:</label>
                      <div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">
                            <div class="input-group pull-left">
                                @Html.TextBoxFor(m=>m.LastName, new {@class = "form-control", type="text", id="lastname", autofocus = "autofocus", placeholder = "Last Name", required = "required"})
                                <div class="input-group-append">
                                    <div class="input-group-text">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                }
            </div>
            </div>
        </div>
</center>

1 Ответов

Рейтинг:
11

Richard Deeming

Добавь class="col-form-label col-xs-2 col-md-6" к каждому из ваших ярлыков.

Удалять col-md-offset-8 от вашего имени input-group элементы.

Вы также можете удалить col-sm-6, так как у вас уже есть col-xs-6 на том же элементе.

Удалять pull-left из input-group элементы.

Вы также захотите удалить autofocus атрибут из всех, кроме первого текстового поля.

<div class="row">
    <label for="Title" class="col-form-label col-xs-2 col-md-6"> Title: </label>
    <div class="input-group col-md-6 col-xs-10">
        <div class="input-group">
            @Html.TextBoxFor(m => m.Title, new { @class = "form-control", type = "text", id = "title", autofocus = "autofocus", placeholder = "Title", required = "required" })
            <div class="input-group-append">
                <div class="input-group-text">
                </div>
            </div>
        </div>
    </div>
</div>
Демонстрация[^]
Сеточная система · Bootstrap[^]
Форма решетки - формы · ушко[^]