twitter-bootstrap twitter bootstrap input-group-addon 和 btn-group 没有很好地对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18077945/
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
twitter bootstrap input-group-addon and btn-group not aligning nicely
提问by J.Pip
I have a select item that I've applied the selectpicker function on from
http://silviomoreto.github.io/bootstrap-select/
now I'm trying to align the input-group-addon with the select, which turned into a btn-group,
however the addon's height is never the same as the btn-group's height, I'm using twitter bootstrap 3.
Anyone who can advice me on how to do this, my code is:
我有一个选择项目，我已经从
http://silviomoreto.github.io/bootstrap-select/应用了 selectpicker 功能，
现在我正在尝试将 input-group-addon 与选择对齐，这变成了一个btn-group，但是插件的高度永远不会与 btn-group 的高度相同，我使用的是 twitter bootstrap 3。
任何可以建议我如何做到这一点的人，我的代码是：
<div class="input-group">
<span id="contact_servicecode" class="input-group-addon ng-binding">CONTACT_SERVICECODE</span>
<div class="btn-group bootstrap-select">
<button class="btn dropdown-toggle btn-custom" data-toggle="dropdown" type="button">
<div class="filter-option pull-left">1</div>
<div class="caret"></div>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu">
</div>
<select class="selectpicker mobile-device" style="display: none;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
采纳答案by theptrk
Here is my jsbin for how I fixed it.jsbin
这是我如何修复它的 jsbin。jsbin
When you set the input-group sizes either 'input-group-lg' or 'input-group-sm' it will give you predefined sizes - most notably a height of 46px or 30px for the inputs respectively. However nothing happens if you accept the regular size. I think this is so you aren't surprised if you have settings for inputs outside of Bootstrap.
当您将输入组大小设置为 'input-group-lg' 或 'input-group-sm' 时，它将为您提供预定义的大小 - 最显着的是输入的高度分别为 46px 或 30px。但是，如果您接受常规尺寸，则不会发生任何事情。我认为这是为了让您在 Bootstrap 之外设置输入时不会感到惊讶。
Here are example measurements for lg
以下是 lg 的示例测量值
.input-group-lg > .input-group-btn > .btn {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
Instead of tweaking lg after the fact, I created a class called 'input-group-reg' uses measurements that are a middle ground between the 'lg' and 'sm' given by bootstrap.
我没有在事后调整 lg，而是创建了一个名为“input-group-reg”的类，它使用的测量值介于引导程序给出的“lg”和“sm”之间。
.input-group-reg > .form-control {
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
/* Sizing the input */
.default-input-group-lg > form-control {
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
/* Sizing the button */
.input-group-reg > .input-group-btn > .btn, .input-group-reg > .input-group-btn:last-child > .dropdown-toggle{
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
回答by orrd
It sounds like you're running into a known issue with Bootstrap when it's compiled with some SASS compilers. See https://github.com/twbs/bootstrap-sass/issues/409.
听起来您在使用某些 SASS 编译器编译 Bootstrap 时遇到了一个已知问题。请参阅https://github.com/twbs/bootstrap-sass/issues/409。
If you're using bootstrap-sass, that's that's causing it. You have to set the SASS precision to 10 before compiling Bootstrap. How you set it depends on what your particular set up is (Gulp, Grunt, Laravel Elixir, etc.).
如果您使用的是 bootstrap-sass，那就是它的原因。在编译 Bootstrap 之前，您必须将 SASS 精度设置为 10。如何设置取决于您的特定设置（Gulp、Grunt、Laravel Elixir 等）。
回答by orrd
.bootstrap-select.btn-group[class*="span"]{float:none;display:inline-block;margin-bottom:**0px**;margin-left:0}
is on first line of select.min.css setting margin-botton to 0 ->problem solved!
在 select.min.css 的第一行，将 margin-botton 设置为 0 -> 问题解决了！
回答by Kris Braun
As @theptrk says, it seems an explicit height isn't being set for buttons in input groups when not using input-group-smor input-group-lg. I was able to fix this by just adding this to my bootstrap overrides:
正如@theptrk 所说，当不使用input-group-smor时，似乎没有为输入组中的按钮设置明确的高度input-group-lg。我可以通过将它添加到我的引导覆盖中来解决这个问题：
// Fix input-group button sizing issue
.input-group > .input-group-btn > .btn, .input-group-btn:last-child > .dropdown-toggle {
height: 34px;
}
