如何使用引导列/网格系统将按钮放在输入框旁边？

Question

鉴于我正在使用引导列/网格系统，我如何能够在输入框旁边放置一个按钮？ Label为 2， EditorFor div 为 4， input div 为 6。如果我将EditorFor div 降低到 3，它会使input/button div 靠近，但它会缩小EditorFor的宽度

style style = "border: 1px solid red;" 只是为了调试。

布局当前外观的图像

EditorFor设置为 3 并缩小输入宽度的示例

<div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.Tag.Name, htmlAttributes: new { @class = "control-label col-md-2", style = "border: 1px solid red;" })
            <div class="col-md-4" style = "border: 1px solid red;">
                @Html.EditorFor(model => model.Tag.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Tag.Name, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-6" style = "border: 1px solid red;">
                <input type="submit" value="Add Tag" class="btn btn-default" style = "border: 1px solid red;"/>
            </div>
        </div>
</div>

谢谢

• 额外的细节

这是 html 输出：

<div class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-md-2" for="Tag_Name" style="border: 1px solid red;">Tag Name:</label>
            <div class="col-md-4" style = "border: 1px solid red;">
                <input class="form-control text-box single-line" data-val="true" data-val-length="Tag cannot be longer than 50 characters." data-val-length-max="50" data-val-regex="Must start with a capital letter, only alphabetic characters and no spaces allowed." data-val-regex-pattern="^[A-Z]+[a-zA-Z&quot;&#39;\s-]*$" data-val-required="The Tag Name: field is required." id="Tag_Name" name="Tag.Name" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Tag.Name" data-valmsg-replace="true"></span>
            </div>
            <div class="col-md-6" style = "border: 1px solid red;">
                <input type="submit" value="Add Tag" class="btn btn-default" style = "border: 1px solid red;"/>
            </div>
        </div>
</div>

Answer 1

使用输入组将按钮放在输入框旁边。

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-horizontal"> <div class="form-group"> <label class="control-label col-md-2" for="Tag_Name" style="border: 1px solid red;">Tag Name:</label> <div class="col-md-4" style="border: 1px solid red;"> <div class="input-group"> <input class="form-control text-box single-line" data-val="true" data-val-length="Tag cannot be longer than 50 characters." data-val-length-max="50" data-val-regex="Must start with a capital letter, only alphabetic characters and no spaces allowed." data-val-regex-pattern="^[AZ]+[a-zA-Z&quot;&#39;\\s-]*$" data-val-required="The Tag Name: field is required." id="Tag_Name" name="Tag.Name" type="text" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="Tag.Name" data-valmsg-replace="true"></span> <div class="input-group-append"> <input type="submit" value="Add Tag" class="btn btn-default" style="border: 1px solid red;" /> </div> </div> </div> </div> </div>

Answer 2

问题是@Html.EditorFor有一个最大宽度。 这意味着它永远不会达到col-md-4或更高的宽度。 所以我要么需要增加@Html.EditorFor的最大宽度来填充col-md-4 ，要么使用col-md-3使按钮更接近输入。

由于引导程序的列/网格系统填充，使用col-md-3会导致EditorFor的宽度缩小（相对于进行EditorFor ）的问题。

在这种情况下，删除padding-right / 将其设置为0会删除此间隙，从而使EditorFor现在填充 col 的右侧。

最终代码：

    <div class="form-group">
        @Html.LabelFor(model => model.Tag.Name, htmlAttributes: new { @class = "control-label col-md-2", style = "border: 1px solid red;" })
        <div class="col-md-3" style="border: 1px solid red; padding-right:0;">
            @Html.EditorFor(model => model.Tag.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Tag.Name, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-7" style="border: 1px solid red;">
            <input type="submit" value="Add Tag" class="btn btn-default" style="border: 1px solid red;" />
        </div>
    </div>