输入和按钮之间的间隙答案

【问题标题】：Gap between input and button输入和按钮之间的间隙
【发布时间】：2015-10-15 04:14:26
【问题描述】：

在 ASP.Net MVC 应用程序中，我尝试将 input-group 用于输入和按钮对。我希望它看起来像这样（就像在 getbootstrap.com 中一样）：

但在我的应用程序中看起来像这样：

输入和按钮之间有很大的空间。这是我的 HTML：

<div class="input-group">
            <input id="empNoTxt" type="text" class="form-control" placeholder="Sicil Numarası" />
            <span class="input-group-btn">
                <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-eye-open"></span> Sorgula</button>
            </span>
        </div>

【问题讨论】：

标签： html asp.net-mvc twitter-bootstrap

【解决方案1】：

我认为您的 html 没有任何问题...这是您的代码的一个工作示例，该代码具有三个不同容器大小的相同按钮。

    <div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div class="input-group">
                <input id="empNoTxt" type="text" class="form-control" placeholder="Sicil Numarası" />
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-eye-open"></span> Sorgula</button>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
            <div class="input-group">
                <input id="empNoTxt" type="text" class="form-control" placeholder="Sicil Numarası" />
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-eye-open"></span> Sorgula</button>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
            <div class="input-group">
                <input id="empNoTxt" type="text" class="form-control" placeholder="Sicil Numarası" />
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-eye-open"></span> Sorgula</button>
                </span>
            </div>
        </div>
    </div>
</div>

确保您引用了正确版本的引导程序。

【讨论】：

您使用的版本有问题，或者您没有对 bootstrap 的引用。我为您发布的是我每天在客户项目中使用的代码。我将使用 nuget 包管理器首先更新您的引导库。如果这不起作用，请发布您的 bundle.cs 文件和布局页面的 head 部分，我会看看它...您的 html 是正确的，问题出在其他地方

【解决方案2】：

使用这个

<div class="input-group">

          <input type="text" class="form-control" placeholder="Search for..."><span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
        </div><!-- /input-group -->

【讨论】：

你能在小提琴中重现同样的内容吗？

【解决方案3】：

我从另一个站点找到了解决方案： https://jasenhk.wordpress.com/2014/06/09/mvc-bootstrap-input-group-button-space/

在 MVC 项目中有一个名为“Site.css”的默认 css 文件。您应该删除以下行：

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

【讨论】：