@ Html.Textbox和glyphicon之间的空格

Question

我确信我只是忽略了显而易见的事情，但我对一个相当简单的问题有点麻烦。问题。我只想在文本框旁边放一个glyphicon（在ASP .NET MVC razor中）。但是，他们之间有一个空间，我无法摆脱。它看起来像在下面的截图。

剃刀代码：

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

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

<磷>氮

Answer 1

示例：

Feb 20, 2018 9:09:02 AM org.openqa.selenium.remote.ProtocolHandshake   createSession
INFO: Detected dialect: W3C
Exception in thread "main" org.openqa.selenium.InvalidArgumentException: Missing 'type' parameter
Build info: version: '3.8.1', revision: '6e95a6684b', time: '2017-12-01T19:05:14.666Z'
System info: host: 'DESKTOP-MHUBI18', ip: '10.0.0.17', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_111'
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities {acceptInsecureCerts: false, browserName: firefox, browserVersion: 58.0.2, javascriptEnabled: true, moz:accessibilityChecks: false, moz:headless: false, moz:processID: 19384, moz:profile: C:\Users\Veenu Gilotra\AppD..., moz:webdriverClick: true, pageLoadStrategy: normal, platform: XP, platformName: XP, platformVersion: 10.0, rotatable: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}}
Session ID: 55f77cc6-f94a-4ac3-9b6e-e6452d9883c4
at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
at sun.reflect.NativeConstructorAccessorImpl.new Instance(Unknown Source)
at sun.reflect.DelegatingConstructorAccessorImpl.new Instance(Unknown Source)
at java.lang.reflect.Constructor.newInstance(Unknown Source)

当您使用 btn btn-default 时，它包含填充以及对齐方式。因此，你失去了你的风格。所以请举例说明并使用 onClick 事件提交此值。

<强>更新

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

Answer 2

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

我向视图中添加了一个CSS脚本替代，如下所示

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

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

Answer 3

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

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