0

I couldnt make up the title clear (feel free to edit it).

So, I have included an image to show the problem.

See the Google button is at same level as input but search button is overflowing.

検索ボタンがあふれているのを見る

Error occurs only when I place just the icon-search inside button. If I replace icon with text, it fixes the problem. It has something to do with font-size : 17.5px of .btn-large when I change it to font-size:16.5px , it works. I can hack it but I want a valid method.

Demo

Markup:

<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 */
}

Edit:

Experiencing problem in,

Chrome Version 24.0.1312.57 Firefox 18.0.1 Opera 12.14 (all running in 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 に答える