使用 Jumbotron 容器的输入组大于 Bootstrap 3 中的输入答案

【问题标题】：Input groups bigger than input in Bootstrap 3 using Jumbotron container使用 Jumbotron 容器的输入组大于 Bootstrap 3 中的输入
【发布时间】：2013-09-05 18:25:52
【问题描述】：

我正在用 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 规则修复它，那将是很好的。

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

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

【讨论】：

感谢发布！拯救我的生命 :P 继续这个 :)
我不知道你是怎么找到它的，但你真是个了不起的家伙！非常感谢。
嗯，这对我也不起作用 - 插件的大小仍然不成比例。我最终使用了input-group-btn。

【解决方案2】：

引导解决方案是将 input-group-lg 类添加到包含 <div> 的 shown in the documentation 上，但您会注意到插件仍然比输入稍大，因此您只需调整 @ 的高度987654325@匹配；我加了 5 px：

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

【讨论】：

它仍然不太正确（在 bootstrap 3.0.3 中关闭了几个 px）。我hosang解决以下问题的解决方案可能更好
@TomDignan：我同意这是更好的解决方案；如果 OP 不接受，我将删除此答案。

【解决方案3】：

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

通常，人们会尝试更改高度、最小高度或填充等。

但是大小不同的原因是.jumbotron中的.input-group继承了"font-size: 21px;"

您应该像下面这样更改.input-group 的font-size 不 .input-group-addon。

.input-group { font-size: 14px !important; }

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我修复了它，将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;
}

就是这样。

【讨论】：

【解决方案6】：

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

我通过修改 adrift 的答案来修复：

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

这让我可以更好地控制我想要应用它的位置。

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

我将 form-control input 设置为 font-size: 100% - 这就是我的问题所在。删除了那个 CSS，问题就消失了。（引导程序 4）

【讨论】：

【解决方案9】：

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

.input-group {  font-size:0px !important  }

【讨论】：

【解决方案10】：

不要让输入更大，而是让跨度（输入组插件）更小。为此，请降低其填充。所以：

.input-group-addon {
    padding: 0px 6px;
}

【讨论】：