8

次のコードのように、navbar-form で入力グループを使用したい:

<form class="navbar-form navbar-left" role="search">
    <div class="input-group">
        <input class="form-control" placeholder="product" type="text">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Search</button>
        </span>
    </div>
</form>

firefoxでは200px程度の固定サイズになりました。ただし、chrome または safari では、検索にまったく新しい行が必要です。ブートストラップの css が入力の幅を制御するかどうかを知りたいです。

input-group-btn は 2 つの CSS 設定を取得しました。display: table-cell; 幅: 1%。これらは何のためですか？

ドキュメントでは、デフォルトの検索バーは次のとおりです。

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

FirefoxでもChromeでも問題なく動作しますが、ナビゲーションバーの残りのスペースを占有したいです。Facebookの検索バーのように。

私は個人の開発者で、フロントエンドの設計が苦手ですが、この特定の要求について何か知っている人はいますか?

4

3 に答える 3

2

これは Chrome のバグです (こちらを参照)。ハードな CSS を使用する必要はありません。次の方法で修正できます。

。以下

@media (min-width: @grid-float-breakpoint) {
  .navbar-form {
    .input-group-btn,
    .input-group-addon {
      width : auto;
    }
  }
}

または.css

@media (min-width: 768px) {
  .navbar-form .input-group-btn,
  .navbar-form .input-group-addon {
    width: auto;
  }
}
于 2014-06-09T22:33:38.433 に答える