TwitterのブートストラップCSS静的流体形位置決め

Question

私はこのようなレイアウトを取得しようとしているTwitterのブートストラップのフレームワークを使用しています：

これが今どのように見えるかです：

Current layout http://f.cl.ly/items/1n3y0F1I3D282g2U1J3Z/Screen%20Shot%202012-07-28%20at%209.09.10%20PM.png

jsFiddle fullscreen

jsFiddle

フォームコンテナの幅は、ブラウザの幅に基づいて変化します（Twitter BootstrapのCSSメディアクエリ）。アイコンボックスの幅は常に14ピクセルです。

私は、テキスト入力の幅を記入しようとするために静的な幅のサイドバー/流体コンテンツのCSSレイアウトに基づいてさまざまなことを試みました。

私の唯一の選択肢は、テキスト入力の絶対幅を定義する独自のCSSメディアクエリを作成することだと思います。

Answer 1

多くのCSSフレームワークと同様に、paddingには非常に注意する必要があります。これを脱い

.patch-well { 
    padding: 20px; 
} 

Answer 2

ブートストラップも全体のレイアウト流体を作るためにあなたを必要としないことにより、オブジェクトの最小幅をシミュレートすることができます。あなたのケースでは、ラッパーのスパンとそのナビゲーションの行を流体にしないようにすることができます。

Answer 3

全体フォームをspan3に配置すると、行幅の約25％になります。したがって、解像度が大きい場合、span3はフォーム全体を含むには不十分です。より小さい解像度では、span3の幅は100％になり、小さな解像度では良好に見えます。他のスパンクラスを使用し、スパンクラスの数値を注意深く計算してください。 Like hereまた、私は行クラスの代わりに行 - 流体クラスを使用することを好む、それは幅で操作する方が簡単です。

常にこの

<div class="row-fluid"> 
    <div class"span3"> 
    <!-- content1 --> 
    </div> 
    <div class"span9"> 
    <div class="row-fluid"> 
     <div class="span6"> 
      <!-- content2 --> 
     </div 
     <div class="span6"> 
      <!-- content3 --> 
     </div 
    </div> 
    </div> 
</div> 

のようにいつも私が浮動せずに設計に新しい行をしたい、と私は幅OD親要素の100％をしたい場合、私は行流体を使用する場合は注意を構造体を使用します。 children要素は再び要素の範囲を12にすることができます。この例では、 "content1"は高解像度では幅の25％を使用しますが、解像度が小さい場合は幅が100％になります。大きな決議では、 "content2"と "content3"は親の幅が100％ですが、それはコンテナの幅の75％です。小さな解像度では、すべてのスパンクラスは100％の幅を持ちます。場合によってはそうしたくない場合は、あなたのクラスでデフォルトのブートストラップcssを上書きするだけです。

私はあなたが私の要点を理解してくれることを願っています。申し訳ありません私の英語のために：

Answer 4

これはあなたが欲しいものですhttp://jsfiddle.net/YxKfc/14/、それを確認してください。