2

次のコード例のコードは、次のような結果になるはずですそれはどのように見えるべきか。

<form class="well form-search">
  <div class="pull-right">
    <div class="input-prepend">
      <span class="add-on">
        <i class="icon-search"></i>
      </span>
      <input type="text" class="input-large search-query" />
    </div>
    <button class="btn" type="submit">Search</button>
  </div>
</form>

これは Firefox では問題なく動作しますが、Chrome と Internet Explorer 7 の両方のブラウザーでは、次のようになります。

クロムでどのように見えるか

ブートストラップで「違法」なことをしていますか? 私はまだ何の適応もしていないので、完全に独創的です。

どんな助けでも大歓迎です！

4

3 に答える 3

2

これは報告された問題です: https://github.com/twitter/bootstrap/issues/1362

幅を明示的に設定していないため、この問題で tonybolzan によって概説されている修正が最適に機能します。

.input-prepend, .input-append {
    white-space: nowrap;
    -webkit-padding-end: 27px;
}
于 2012-08-18T21:29:11.840 に答える
1

問題は、マークアップで見つかった空白にありますspan。次のように、入力と同じ行にタグを配置してみてください。

<form class="well form-search">
  <div class="pull-right">
    <div class="control-group">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-search"></i></span><input type="text" class="input-large search-query" />
        </div>
        <button class="btn" type="submit">Search</button>
    </div>
  </div>
</form>
于 2012-04-25T12:26:02.520 に答える
0

これは古いですが、探していた答えを特定するのに役立ちました：

問題はおそらく、ブートストラップが入力の幅を 210px に設定していることです。これにより、アイコン/入力/ボタンのグループ全体がウェルよりも広くなります。

上記の Andres が投稿したフィドルを、ウェル フォームをデフォルトよりも小さい幅に強制することによる問題のサンプルと、幅が小さい入力クラスを使用することによる修正で更新しました。

http://jsfiddle.net/dDtUg/2/

于 2012-07-09T04:23:51.393 に答える