时间戳

首页 > 解决方案 > 如何使用引导列/网格系统将按钮放在输入框旁边？

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

问题描述

鉴于我正在使用引导列/网格系统，我如何能够在输入框旁边放置一个按钮？Labelis of 2, EditorFordiv of 4 and the inputdiv of 6. 如果我将 div 降低到EditorFor3，它会使input/buttondiv 更靠近，但它会缩小EditorFor

该样式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>

标签： htmlcssasp.netrazorbootstrap-4

解决方案

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

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

显示 Bootstrap 的 col 填充的图像

在这种情况下，删除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>

推荐阅读