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

在使用引导列/网格系统的情况下，我如何能够在输入框旁边放置一个按钮？

标签

为2，

编辑器为

div为4，输入为div为6。如果我将

EditorFor

div降低到3，它会使

input/button

div变近，但会缩小

EditorFor

样式

style=“border:1px solid red；”

仅用于调试

@LabelFor（model=>model.Tag.Name，htmlAttributes:new{@class=“control label col-md-2”，style=“border:1px solid red；”）
@EditorFor（model=>model.Tag.Name，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.Tag.Name，“，new{@class=“text danger”}）

谢谢

• 额外细节

以下是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>

标签名称：
用于将按钮置于输入框旁边



标签名称：
用于将按钮置于输入框旁边



标签名称：
问题是
@Html。EditorFor
具有最大宽度。这意味着它永远不会达到
col-md-4
或更高的宽度。因此，我需要增加
@Html.EditorFor
的最大宽度来填充
col-md-4
，或者使用
col-md-3
使按钮更靠近输入

使用
col-md-3
会由于引导的列/网格系统填充而导致
EditorFor
的宽度缩小（与继续使用
EditorFor
相关）


在这种情况下，删除
右侧填充
/将其设置为
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>


@LabelFor（model=>model.Tag.Name，htmlAttributes:new{@class=“control label col-md-2”，style=“border:1px solid red；”）
@EditorFor（model=>model.Tag.Name，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.Tag.Name，“，new{@class=“text danger”}）
问题是
@Html。EditorFor
具有最大宽度。这意味着它永远不会达到
col-md-4
或更高的宽度。因此，我需要增加
@Html.EditorFor
的最大宽度来填充
col-md-4
，或者使用
col-md-3
使按钮更靠近输入

使用
col-md-3
会由于引导的列/网格系统填充而导致
EditorFor
的宽度缩小（与继续使用
EditorFor
相关）


在这种情况下，删除
右侧填充
/将其设置为
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>


@LabelFor（model=>model.Tag.Name，htmlAttributes:new{@class=“control label col-md-2”，style=“border:1px solid red；”）
@EditorFor（model=>model.Tag.Name，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.Tag.Name，“，new{@class=“text danger”}）
嗨！检查输入时是否显示边距或填充？是否使用表格行？它缩小了一些范围，我只是提供了html输出。不使用form-row。请尝试使用类form-row将列包装在div中。如果没有帮助，检查间隙并查看是什么造成的可能会很有用。它看起来像
@Html.EditorFor
有一个最大宽度。这意味着它永远不会达到col-md-4或更高的宽度。因此我需要增加
@Html.EditorFor
的最大宽度来填充col-md-4，或者使用col-md-3使按钮更接近输入。例如，我认为col的开始和按钮之间的间隙是引导的默认padding/margin.Hi！检查输入时是否显示边距或填充？是否使用表格行？它缩小了一些范围，我只是提供了html输出。不使用form-row。请尝试使用类form-row将列包装在div中。如果没有帮助，检查间隙并查看是什么造成的可能会很有用。它看起来像
@Html.EditorFor
有一个最大宽度。这意味着它永远不会达到col-md-4或更高的宽度。因此我需要增加
@Html.EditorFor
的最大宽度来填充col-md-4，或者使用col-md-3使按钮更接近输入。例如，我认为col的开头和按钮之间的间隙是引导的默认填充/边距。