0

我无法清楚地弥补标题（请随意编辑）。

所以，我附上了一张图片来显示这个问题。

看到与Google button在同一水平input但search button正在溢出。

看到搜索按钮溢出

仅当我放置在icon-search里面时才会发生错误button。如果我用文本替换图标，它可以解决问题。当我将其更改为 时，它与它有关font-size : 17.5px ，它可以工作。我可以破解它，但我想要一个有效的方法。.btn-largefont-size:16.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 Firefox 18.0.1 Opera 12.14（全部在 Ubuntu 12.04 中运行）

4

2 回答 2

2

引导图标更常与<i>标签一起使用。

<i class="icon-search"></i>

然而，我并不是说这会解决问题。这可能是特定于浏览器的问题。我知道我在使用 IE 时遇到了问题input-append，但这不是特定于浏览器的样式表无法解决的问题。

.input-append { height:19px; }
.input-append i { margin:0; padding:0; }

编辑：这在 Chrome 上似乎不是问题。至少对于Bootstrap 站点上给出的示例来说不是。

于 2013-02-15T08:55:45.453 回答
2

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

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

默认情况下，这设置为text-top- 尝试设置top（编辑选择器以仅适合有问题的按钮 - 只是为了确保您不会破坏任何其他引导功能）。

于 2013-02-15T08:58:52.883 回答