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

【问题标题】：How to put button right next to input box using bootstrap columns/grid system?如何使用引导列/网格系统将按钮放在输入框旁边？
【发布时间】：2021-02-01 03:10:33
【问题描述】：

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

style = "border: 1px solid red;" 样式仅用于调试。

Image of what the layout currently looks like

Example of EditorFor been set to 3 and shrinking the input width

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

【问题讨论】：

嗨！如果您检查输入，它会显示边距或填充吗？
你在使用表单行吗？它缩小了一些排水沟
Nup，我刚刚提供了 html 输出。不使用表单行。
尝试将列包装在具有类 form-row 的 div 中。如果它没有帮助，检查间隙并查看造成它的原因可能很有用。
看起来@Html.EditorFor 有一个最大宽度。这意味着它永远不会达到 col-md-4 或以上的宽度。所以我要么需要增加 @Html.EditorFor 的最大宽度来填充 col-md-4，要么使用 col-md-3使按钮更靠近输入。我认为 col 开头和按钮之间的差距是引导程序的默认填充/边距。

标签： html css asp.net razor bootstrap-4

【解决方案1】：

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

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

在这种情况下，删除 padding-right / 将其设置为 0 会消除此间隙，因此 EditorFor 现在会填满列的右侧。

最终代码：

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

【讨论】：

【解决方案2】：

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

<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="^[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 class="input-group-append">
          <input type="submit" value="Add Tag" class="btn btn-default" style="border: 1px solid red;" />
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：