我正在尝试使用.input-group类对齐输入和按钮,如here所示。
当我在文本框前面放置一个按钮时,它运行良好并显示所需的输出。
但是,当我将按钮放在文本框旁边时,该按钮不会靠近文本框。
我在我的ASP.NET项目中使用Bootstrap 3,使用Visual Studio 2015 Community Edition创建。
以下是代码:
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<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 -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
答案 0 :(得分:4)
我遇到了完全相同的问题而且我看了cale_b的小提琴,它看起来对我来说是正确的。所以我试着弄清楚我的环境有什么不同。我注意到在我的site.css(我的应用程序的自定义css)中,我有以下内容:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
一旦我删除(或注释掉)那个CSS,那么它就可以了。但现在我需要找到一种不同的方法来默认输入的最大宽度。哦,好吧,至少它解决了我的问题,希望它解决了你的问题。