CSS 使用 Jumbotron 容器的输入组大于 Bootstrap 3 中的输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18576695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input groups bigger than input in Bootstrap 3 using Jumbotron container
提问by David Moreno García
I'm experimenting a strange behavior with Bootstrap 3 input groups. When I add an input-group-addon (text or icon) to a form inside a jumbotron, the input-group height is bigger than its input height.
我正在用 Bootstrap 3 输入组试验一种奇怪的行为。当我将输入组插件（文本或图标）添加到超大屏幕内的表单时，输入组高度大于其输入高度。
Here you can find a JsFiddle and an screenshot with the problem:
在这里你可以找到一个 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>
Live example at http://jsfiddle.net/DTcHh/
http://jsfiddle.net/DTcHh/ 的现场示例
Screenshot: 
截屏：
How can I fix this problem? I'm looking for a Bootstrap solution but if that's not possible would be nice if you could help me to fix it with CSS rules.
我该如何解决这个问题？我正在寻找 Bootstrap 解决方案，但如果这不可能，如果您能帮助我用 CSS 规则修复它会很好。
采纳答案by adrift
The bootstrap solution is to add the input-group-lgclass on the containing <div>- as shown in the documentation, but you'll notice the addon is still slightly larger than the input so you can just adjust the height of the <input>to match; I added 5 px:
引导解决方案是input-group-lg在包含的类上添加类<div>- 如文档中所示，但您会注意到插件仍然比输入稍大，因此您只需调整高度<input>以匹配；我添加了 5 像素：
回答by goetz
Last night, I had exactly the same problem. None of the fixes mentioned above worked in my context. What finally did do the job was setting the margin to 0:
昨晚，我遇到了完全相同的问题。上面提到的修复都没有在我的上下文中起作用。最终完成这项工作的是将边距设置为 0：
.input-group .form-control {
margin: 0px !important;
}
Perhaps this helps someone with a similar problem!
也许这可以帮助有类似问题的人！
回答by Hosang Jeon
The main problem of .input-group-addonsize within .jumbotronis that it inherits font-sizeof .jumbotron.
.input-group-addon内部大小的主要问题.jumbotron是它继承font-size了.jumbotron.
Usually, people are trying to change height, min-height or padding etc.
通常，人们试图改变高度、最小高度或填充等。
Howeverthe cause of different size is that .input-groupin .jumbotroninherits "font-size: 21px;"
然而不同大小的原因是.input-group在.jumbotron继承"font-size: 21px;"
You should change the font-sizeof .input-groupNOT.input-group-addonlike below.
你应该改变font-size的.input-group不是.input-group-addon像下面。
.input-group { font-size: 14px !important; }
回答by Will
Looking at Bootstrap's doc as Adrift suggests, your original code looks perfectly valid. Adding the input-group-lg class is great if you want LARGE but if you don't, it's wrong. Using IE9 and running your code in both my own dev environment and Adrift's jsfiddle, it's working correctly (for me) with and without the input-group-lg class, except of course that with it it's rendered large. Perhaps a browser specific issue??
按照 Adrift 的建议查看 Bootstrap 的文档，您的原始代码看起来完全有效。如果您想要 LARGE，则添加 input-group-lg 类很棒，但如果您不想要，那就错了。使用 IE9 并在我自己的开发环境和 Adrift 的 jsfiddle 中运行你的代码，它在有和没有 input-group-lg 类的情况下都能正常工作（对我来说），当然，除了它被渲染得很大。也许是浏览器特定的问题？
That said, I'm experiencing a similar problem trying to add a radio button at the front of a selectpicker. Oh well...
也就是说，我在尝试在选择器的前面添加一个单选按钮时遇到了类似的问题。那好吧...
回答by arielduarte
I fixed it be adding id="search_button"to my button:
我修复了它添加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>
I then applied the following style to my button:
然后我将以下样式应用于我的按钮：
#search_button {
width: 90px;
margin: 0 auto;
text-align: justify;
}
That's all.
就这样。
回答by Sharky99x
I have just run across the same issue.
我刚刚遇到了同样的问题。
I fixed by modifying adrift's answer to :
我通过修改漂泊的答案来修复：
<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>
And then adding the following CSS
然后添加以下CSS
.input-group-fix > .form-control, .input-group-fix > .input-group-addon, .input-group-fix > .input-group-btn > .btn {
height: 43px;
}
This gives me greater control on where I want to apply it.
这使我可以更好地控制要应用它的位置。
回答by Aseem
I had the same issue with bootstrap 4. Then I realized my css had following setup for span tags:
我在 bootstrap 4 中遇到了同样的问题。然后我意识到我的 css 对 span 标签进行了以下设置：
span {
width: 100px;
height: 100px;
display: inline-block;
background: #0c5460;
}
Hence all my spans were big. Once I removed it, all worked fine.
因此，我所有的跨度都很大。一旦我删除它，一切正常。
回答by Ali Abdoli
Instead of making the input bigger, make the span (input-group-addon) smaller. To do that, make its padding lower. So:
不是让输入更大，而是让跨度（输入组插件）更小。为此，请降低其填充。所以：
.input-group-addon {
padding: 0px 6px;
}
