我无法把标题补清楚(请随意编辑)。
所以,我附上了一张图片来说明问题。
看到 Google 按钮
与 input
处于同一级别,但 search 按钮
溢出。
仅当我将 icon-search
放在 button
中时才会发生错误。如果我用文本替换图标,它可以解决问题。当我将其更改为 font-size:16.5px
时,它与 .btn-large
的 font-size : 17.5px
有关,有用。我可以破解它,但我想要一个有效的方法。
标记:
<form class="input-prepend input-append">
<div class="btn-group"> <span class="btn btn-large dropdown-toggle" data-toggle="dropdown">Google <span class="caret"></span></span>
<ul
class="dropdown-menu">
<li><a href="#">a</a>
</li>
<li><a href="#">b</a>
</li>
</ul>
</div>
<input type="text" class="input-xlarge" placeholder="Search">
<button class="btn btn-large" type="submit"> <span class="icon icon-search"></span>
</button>
</form>
CSS
form .input-xlarge {
padding: 11px 19px;
/* equal to btn-large */
}
编辑:
遇到问题,
Chrome 版本 24.0.1312.57 火狐 18.0.1 歌剧 12.14 (全部在 Ubuntu 12.04 中运行)
最佳答案
.btn-large [class^="icon-"], .btn-large [class*=" icon-"] {
vertical-align:top;
}
默认设置为 text-top
- 尝试设置为 top
(编辑选择器以适应有问题的按钮 - 只是为了确保你没有不要破坏任何其他 Bootstrap 功能)。
关于html - 推特 Bootstrap : button with only icon inside input-append overflows past the input,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14891008/