4

私がやろうとしているのは、ナビゲーションバーの中央に検索ボックスを配置することです（画像はこちら）。どうすればいいですか？

HTML：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#">logo</a>
      <div class="nav-collapse collapse">
        <form class="navbar-form pull-right">
          <div class="input-append">
            <input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
            <button class="btn" type="button">Search</button>
          </div>
        </form>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Bootstrapに付属しているデフォルトのCSSを使用しています。

4

4 に答える 4

2

フォーム要素を独自のdiv内にラップし、クラスまたはIDを指定してから、コードのカスタム行を作成して中央に配置します。例：

HTML：

<div id="search">
*form code here*
</div>

CSS：

#search { width: 200px; margin: auto; }
于 2013-02-08T20:42:50.013 に答える
1

アプリケーションに組み込まれているCSSをオーバーライドする必要がある場合は、次のように！importantを使用します。

<div style="margin: 0px auto !important;"></div>

または、cssクラスに入れます。

于 2013-02-08T20:38:26.247 に答える
0

これを参照してください...

.nav-collapse{
    margin-right: 50%;
}

例

于 2013-02-08T20:53:39.310 に答える
0

Bootstrap 3でも、これに長い間苦労していました。私はついに、このソリューションが完璧に機能することを発見しました。 左、中央、右に整列したアイテムを備えたBootstrap NavBar 検索ボックスの周りのナビゲーションバーの内側に、クラスを追加しました。 Skellyの回答のcss定義。

次に、フォーム内のいくつかの要素にtext-align：leftを適用する必要がありました（たとえば、検索フォームに添付された先行入力の提案）。

于 2014-03-03T21:53:25.893 に答える