Question

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

Answer 1

我从其他网站找到解决方案： Can ZMQ publish message to specific client by pub-sub socket?

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

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

Answer 2

我认为你的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。

Answer 3

使用此

<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 个答案: