引导表单列对齐方式

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是标准的引导程序。所以..。正如您所看到的，表单的大部分在两列中，但最后一个字段(Notes)占据了更多的屏幕宽度。因此，我无法让Notes的标签或输入字段与前面的字段对齐。我试过摆弄页边距和边距，但我找不到准确的行数。我感觉我需要能够向Bootstrap请求一个小数列的宽度。有没有办法让最后一个字段与之前的字段保持一致？

感谢收到的任何输入。尼克

Answer 1

您在<div class="col-6">中使用col-3，所以您需要在<div class="col-12">中设置css，但是没有col-1.5 -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>

结果：

​