33

我正在使用 Bootstrap 3 输入组尝试一种奇怪的行为。当我将输入组插件（文本或图标）添加到 jumbotron 内的表单时，输入组高度大于其输入高度。

在这里你可以找到一个 JsFiddle 和一个有问题的截图：

<div class="jumbotron">
    <h1>Jumbotron with form</h1>
        <form>
           <div class="input-group">
               <input type="text" class="form-control" placeholder="Username">
                  <span class="input-group-addon">@</span>
           </div> 
        </form>
  </div>

http://jsfiddle.net/DTcHh/上的实时示例

截屏：在此处输入图像描述

我该如何解决这个问题？我正在寻找一个 Bootstrap 解决方案，但如果这不可能，如果你能帮助我用 CSS 规则修复它，那就太好了。

4

10 回答 10

35

昨晚，我遇到了完全相同的问题。上面提到的修复都没有在我的上下文中起作用。最终完成的工作是将边距设置为 0：

.input-group .form-control {
    margin: 0px !important;
}

也许这可以帮助有类似问题的人！

于 2014-06-14T10:29:23.573 回答
21

引导解决方案是input-group-lg在包含上添加类<div>- 如文档中所示，但您会注意到插件仍然略大于输入，因此您只需调整高度<input>以匹配；我添加了 5 像素：

http://jsfiddle.net/DTcHh/21/

于 2013-09-02T15:45:11.490 回答
10

.input-group-addon内部大小的主要问题.jumbotron是它继承font-size了.jumbotron.

通常，人们试图改变高度、最小高度或填充等。

然而不同大小的原因是.input-group在.jumbotron继承"font-size: 21px;"

您应该更改NOT如下所示font-size。.input-group .input-group-addon

.input-group { font-size: 14px !important; }
于 2013-11-24T09:02:09.960 回答
2

正如 Adrift 所建议的那样，查看 Bootstrap 的文档，您的原始代码看起来完全有效。如果您想要 LARGE，则添加 input-group-lg 类非常棒，但如果您不这样做，那就错了。使用 IE9 并在我自己的开发环境和 Adrift 的 jsfiddle 中运行您的代码，无论是否使用 input-group-lg 类，它都可以正常工作（对我来说），当然除了它会变得很大。也许是浏览器特定的问题？

也就是说，我在尝试在选择器前面添加单选按钮时遇到了类似的问题。那好吧...

于 2013-09-20T16:07:09.653 回答
0

我将表单控制输入设置为font-size: 100% - 这对我来说是这个问题。删除了那个 CSS，问题就消失了。（引导程序 4）

于 2021-10-09T21:46:48.997 回答
0

我修复了它添加id="search_button"到我的按钮：

<div class="input-group input-group-lg">
    <input type="text" class="form-control" placeholder="Username"/>
    <span class="input-group-btn">
        <button id="search_button" class="btn btn-primary" type="button">GO</button>
    </span>
</div>

然后我将以下样式应用于我的按钮：

#search_button {
    width: 90px;
    margin: 0 auto;
    text-align: justify;
}

就这样。

于 2015-09-14T15:41:19.847 回答
0

只需在标题样式标签上添加此 CSS 样式即可。

.input-group {  font-size:0px !important  }
于 2022-02-09T14:06:24.807 回答
0

我刚刚遇到了同样的问题。

我通过修改漂移的答案来修复：

<div class="input-group input-group-fix">
   <div class="input-group-prepend">
      <span class="input-group-text" id="inputlbl-field1">field1</span>
   </div>
   <input id="field1" type="text" class="form-control" aria-label="field1" aria-describedby="inputlbl-field1" data-toggle="tooltip" data-placement="top">
</div>

然后添加以下CSS

.input-group-fix > .form-control, .input-group-fix > .input-group-addon, .input-group-fix > .input-group-btn > .btn {
    height: 43px;
}

这让我可以更好地控制我想在哪里应用它。

于 2020-02-26T15:52:11.440 回答
0

我在 bootstrap 4 中遇到了同样的问题。然后我意识到我的 css 对 span 标签有以下设置：

 span {
            width: 100px;
            height: 100px;
            display: inline-block;
            background: #0c5460;
        }

因此，我所有的跨度都很大。一旦我删除它，一切正常。

于 2020-04-03T03:39:41.947 回答
-2

与其使输入更大，不如使跨度（输入组插件）更小。为此，请降低其填充。所以：

.input-group-addon {
    padding: 0px 6px;
}
于 2016-11-29T23:01:27.690 回答