1

ここに私のサイトの本体があります: (twitter ブートストラップ 2.0 を使用)

<div class="container">
  <div class="row-fluid" style="text-align: center">
    <div class="span12">
      <div class="page-header">
        <h1>Header</h1>
      </div>
      <form class="well form-search">
        <input type="text" class="span7 input-large search-query" />
        <button type="submit" class="span3 btn btn-primary" >Search</button>
      </form>
    </div>
  </div>
</div>

テキストと送信ボタンを中央に配置し、流動的な 7:3 にしたいのですが、スパン クラスをそれらに設定すると、新しい行に分割され、最初の行にテキストが、別の行に入力が送信されます。それらを同じ水平線上に配置するにはどうすればよいですか?

4

1 に答える 1

2

更新 バージョン 2.1.0がリリースされました。このバージョン (およびおそらく将来のバージョン) でデフォルトで提供されるため、以下のオフセット ソリューションを確認する必要があります。

ブートストラップは入力スパンをフロートにしないようです: github forms.less

だからここにあなたが使うことができるものがあります：

.form-span input[type="text"][class*="span"] { float: left; }

編集

.container-fluid流動性のために、 を使用する必要があります.container。サイズが固定されているためです (これにより、内部の流動グリッドが固定されます)。

センタリングについては、2 つの解決策があります。

インライン テキスト センタリングの使用: (間違いなく最良の選択ではありません)

.inline-center { text-align: center!important; }
.inline-center [class*="span"] { float: none!important; display: inline-block!important; }

または、バージョン 2.1またはこの要点ですぐ.offsetXに利用可能になる流体クラスを使用できます。

<input type="text" class="offset1 span7 input-large search-query" />
<button type="submit" class="span3 btn btn-primary" >Search</button>

デモ (jsfiddle)

于 2012-08-11T07:53:16.667 に答える