Bootstrap - 输入组不起作用

Posted 2023-03-06

【中文标题】Bootstrap - 输入组不起作用

【英文标题】：Bootstrap - Input group doesn't work

【发布时间】：2016-06-07 15:31:40

【问题描述】：

我正在尝试使用 .input-group 类对齐输入和按钮，如 here 所示。

当我在文本框前放置一个按钮时，它运行良好并显示所需的输出。

但是，当我将按钮放在文本框旁边时，按钮不会靠近文本框。

我在使用 Visual Studio 2015 社区版创建的 ASP.NET 项目中使用 Bootstrap 3。

代码如下：

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

【问题讨论】：

这不是我的经验，This Fiddle。你能分享更多 - 浏览器吗？版本？实际呈现的标记与“编码”标记？

如果您使用 MVC 或 webforms，您可以发布您的渲染输出吗？

【参考方案1】：

我遇到了完全相同的问题，我查看了 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，它就可以工作了。但现在我需要找到一种不同的方法来默认输入的最大宽度。哦，好吧，至少它解决了我的问题，希望它解决了你的问题。

【讨论】：

也为我工作。 Asp .Net MVC 在 Content 文件夹中添加了一个默认的 Site.css 并带有这些 css 标记。

总是很容易忘记，即使是空的 MVC 模板的样式也可能会覆盖您的引导 css