@Html.Textbox 和 glyphicon 之间的空格答案

【问题标题】：Space between @Html.Textbox and glyphicon@Html.Textbox 和 glyphicon 之间的空格
【发布时间】：2018-07-30 05:47:57
【问题描述】：

我确信我只是忽略了显而易见的问题，但我在一个“相当简单”的问题上遇到了一些麻烦。我只是想在文本框旁边放置一个字形图标（在 ASP .NET MVC 剃须刀中）。但是，它们之间有一个空间，我无法摆脱。如下图所示。

剃刀代码：

<div class="input-group col-md-4">
    @Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @class = "form-control", @placeholder = "Search" })
    <span class="input-group-btn">
        <button class="btn btn-default" type="submit">
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </span>
</div>

有人遇到过同样的问题吗？你是怎么解决的？提前非常感谢。

【问题讨论】：

根本无法复制。您必须有一些 css 导致它（可能是输入上的 max-width）
@user3559349 确定了我的特定问题的解决方案〜谢谢〜我已经在下面发布了我的解决方案。

标签： css razor twitter-bootstrap-3 glyphicons

【解决方案1】：

我遇到了同样的问题，最终在表单标签中使用了 Bootstrap 的 form-inline 类。

@using (Html.BeginForm("*actionName*", "*controller*", *routeValues*, FormMethod.Post, new { @class = "form-inline" }))
{
<div class="input-group col-md-4">
    @Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @class = "form-control", @placeholder = "Search" })
    <span class="input-group-btn">
        <button class="btn btn-default" type="submit">
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </span>
</div>
}

【讨论】：

【解决方案2】：

我遇到了这个确切的问题，@user3559349 的评论就是解决方案。

我在视图中添加了一个 css 脚本覆盖，如下所示

<style>
input, select, textarea {
    max-width: none;
}

我重新渲染的控件现在看起来像这样

【讨论】：

【解决方案3】：

例子：

<div class="input-group">
 @Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @class = "form-control", @placeholder = "Search" })
 <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>

当您使用 btn btn-default 时，它包含 padding 和对齐。由于这个原因，你失去了你的风格。所以流示例并使用 onClick 事件提交此值。

更新：

    <div class="form-group">
        <label class="col-md-4 control-label" style="font-weight: normal;">Date</label>
        <div class="col-md-8">
            <div class="input-group">
                @Html.TextBoxFor(model => model.Date, new { @class = "form-control" })
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
    </div>

【讨论】：

谢谢 Ashiquzzaman，但它看起来并不好。文本框现在更长了，它们之间的空间更大了。
@Nearshore 我用我现有的和工作的代码更新答案。
再次感谢您！是的，但它是 TextBoxFor。对于我的搜索，我只需要一个文本框。我尝试了不同的引导布局 - 同样的问题。它对你有用吗？
@Nearshore。这是我的工作代码，我使用它大约 20 个项目。
这个问题让我抓狂！ :-(谢谢你的支持！