html - 推特 Bootstrap : button with only icon inside input-append overflows past the input

Question

我无法把标题补清楚(请随意编辑)。

所以，我附上了一张图片来说明问题。

看到 Google 按钮 与 input 处于同一级别，但 search 按钮 溢出。

仅当我将 icon-search 放在 button 中时才会发生错误。如果我用文本替换图标，它可以解决问题。当我将其更改为 font-size:16.5px 时，它与 .btn-large 的 font-size : 17.5px 有关，有用。我可以破解它，但我想要一个有效的方法。

Demo

标记:

---

<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 中运行)

Answer 1

http://jsfiddle.net/chne9/1/

.btn-large [class^="icon-"], .btn-large [class*=" icon-"] {
    vertical-align:top;    
}

默认设置为 text-top - 尝试设置为 top(编辑选择器以适应有问题的按钮 - 只是为了确保你没有不要破坏任何其他 Bootstrap 功能)。