0

ブートストラップを使用して2列のレイアウトを作成しています。最初の列にフォームが必要です。コンテナのサイズを小さくすると、入力テキストフィールドのサイズが変更されず、最終的に列から外れます。入力フィールドが列を分割するのはなぜですか？

この動作の例を次に示します。

<div class="container-fluid">
      <div class="row-fluid">
           <div class="span4">
               <div class="well">
                   <form>
                       <input type="text" />
                   </form>
               </div>
          </div>
          <div class="span8">
             Notice how I am to the left of the well, but the input field breaks out of the well and column. And I'm overlapping with the input field!
          </div>
      </div>
  </div>

この簡単な例は、動作を示しています：http: //jsfiddle.net/xhHQD/1/

クロームを使用しています。

4

1 に答える 1

1

あなたの質問に答えるために、テキストフィールドは、テキストのように折り返すことができないという理由だけで、親の境界から抜け出します。CSSのwidthプロパティをオーバーライドして、希望する正確な幅にするか、ブロックレベルの要素に変更してみてください。

フィールドのサイズをその親内に収まるように変更するには、クラス「input-block-level」を追加します。

<input type="text" class="input-block-level" />

BootstrapBaseCSSページでこの例とその他の例を参照してください。

于 2012-11-11T02:46:55.563 に答える