Bootstrap 表单列对齐

Question

我用这种布局创建了一个 Bootstrap 4 表单

生成它的 Razor 页面代码是：

@page
@model HighStreetLeads3.Pages.Leads.EditModel

@{
ViewData["Title"] = "Edit";
Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>Edit</h1>

<h4>Lead</h4>
<hr />
<form class="form-inline col-lg-12" method="post">
<div>

    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Lead.Id" />

</div>

<div class="row col-12">

    <div class="col-6">
        <div class="form-group">
            <div class="col-3">
                <label asp-for="Lead.Name" class="control-label float-left">Name</label>
            </div>
            <div class="col-9">
                <input asp-for="Lead.Name" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.Name" class="text-danger"></span>
            </div>

        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <div class="col-3">
                <label asp-for="Lead.PhoneNumber" class="control-label float-left">Number</label>
            </div>
            <div class="col-9">
                <input asp-for="Lead.PhoneNumber" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.PhoneNumber" class="text-danger"></span>
            </div>
        </div>
    </div>
</div>

<div class="row col-12">
    <div class="col-6">
        <div class="form-group">
            <div class="col-3">
                <label asp-for="Lead.Status" class="control-label float-left"></label>
            </div>
            <div class="col-9">
                <input asp-for="Lead.Status" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.Status" class="text-danger"></span>
            </div>

        </div>
    </div>
    <div class="col-6">
        <div class="form-group">

            <div class="col-3">
                <label asp-for="Lead.NextAction" class="control-label float-left">Next Action</label>
            </div>


            <div class="col-9">
                <input asp-for="Lead.NextAction" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.NextAction" class="text-danger"></span>
            </div>

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

<div class="row col-12">
    <div class="col-6">
        <div class="form-group">
            <div class="col-3">
                <label asp-for="Lead.WebAddress" class="control-label float-left">URL</label>
            </div>
            <div class="col-9">
                <input asp-for="Lead.WebAddress" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.WebAddress" class="text-danger"></span>
            </div>

        </div>
    </div>
    <div class="col-6">
        <div class="form-group">

            <div class="col-3">
                <label asp-for="Lead.ContactName" class="control-label float-left">Contact</label>
            </div>


            <div class="col-9">
                <input asp-for="Lead.ContactName" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.ContactName" class="text-danger"></span>
            </div>

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

<div class="row col-12">
    <div class="col-6">
        <div class="form-group text-left">
            <div class="col-3">
                <label asp-for="Lead.Where" class="control-label float-left">Address</label>
            </div>
            <div class="col-9">
                <input asp-for="Lead.Where" class="form-control mb-2" style="width:100%" />
                <span asp-validation-for="Lead.Where" class="text-danger"></span>
            </div>

        </div>
    </div>

</div>

<div class="row col-12">
    <div class="col-12">
        <div class="form-group">
            <div class="col-1 mr-0 pr-0">
                <label asp-for="Lead.Notes" class="control-label col-3 float-left"></label>
            </div>
            <div class="col-8">
                <input asp-for="Lead.Notes" class="form-control mb-2 ml-5" style="width:100%" />
                <span asp-validation-for="Lead.Notes" class="text-danger"></span>

            </div>
            <div class="col-2  ml-5 float-right">
                <input type="submit" value="Save" class="btn btn-primary" />
                </div>
            </div>

        </div>
    </div>

@*<div class="form-group col-1 offset-11">
    <input type="submit" value="Save" class="btn btn-primary" />
</div>*@

如果有人需要，我可以添加页面模型，但我认为它不相关，css 是标准的bootstrap。所以..... 正如您所看到的，大部分表单都在两列中，但最后一个字段（注释）占据了更多的屏幕宽度。因此，我无法让 Notes 的标签或输入字段与之前的字段对齐。我试过摆弄边距和填充，但我无法得到准确的排列。感觉我需要能够向 Bootstrap 询问小数列的宽度。有没有办法安排最后一个字段，使其与之前的字段对齐？

非常感谢收到任何意见。尼克

Answer 1

你在<div class="col-6">中使用了col-3，所以你需要在<div class="col-12">中设置col-1.5，但是没有col-1.5，只能尝试设置 css 并使其接近 col-1.5:

<div class="row col-12">
    <div class="col-12">
        <div class="form-group">
            <div class="col-md-1" style="flex: 0 0 12.15%;max-width: 12.15%;">
                <label asp-for="Lead.Notes" class="control-label float-left"></label>
            </div>
            <div class="col-8">
                <input asp-for="Lead.Notes" class="form-control mb-2 ml-5" style="width:100%" />
                <span asp-validation-for="Lead.Notes" class="text-danger"></span>

            </div>
            <div class="col-2  ml-5 float-right">
                <input type="submit" value="Save" class="btn btn-primary" />
                </div>
            </div>

        </div>
    </div>

结果：

Bootstrap 表单列对齐

Bootstrap form column alignment

html

asp.net-core

bootstrap-4

razor-pages