Twitter Bootstrapのフォームフィールドが、fluidコンテナを使用してウェルからはみ出るのはなぜですか？

UPDATE: 問題のデモはこちら: http://jsfiddle.net/fdB5Q/embedded/result/

767px から 998px までの間、フォームフィールドが包含するウェルよりも広くなっています。

767pxより小さいと、フォームの領域全体が改行される。ブラウザのウィンドウ幅が約200pxのときにレンダリングされたページは、完全に表示されます。フォームフィールドは期待通りに縮小されます。

視覚的に理解するために、よく似たこの質問をご覧ください。 https://stackoverflow.com/questions/11706019/twitter-bootstrap-css-static-fluid-form-positioning

以下は、Headのすべてです。

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

これが身体のすべてです。

<div class="container-fluid">

<div class="row-fluid">

<div class="span8">
<p>Some Content.</p>
</div>

<div class="span4">
  <div class="well">    
    <div class="control-group">
      <label class="control-label" for="name">Your Name</label>
      <div class="controls">
      <input type="text" class="input-xlarge" name="name" id="name" maxlength="100" />
      </div>
    </div>
  </div>
</div>

</div>

</div>

フレームワークのどこかを勘違いしているような気がします。流体コンテナを使用してはいけないのでしょうか？私は何を間違えているのでしょうか？ これを修正するために何かを投げ出すことはできますが、問題は私が大局的に間違ったことをしていることかもしれないと思います。

スパンを7と5に変えてみましたが、やはり同じエラーが発生しました。6と6を試してみましたが、その時点でページがばかばかしくなってきました。残りの回答は私には意味不明でした。

入力クラスをxlargeではなくlargeに変更しました。それでもオーバーフローする幅の範囲があったので、表示上余裕があればぜひ広いフォームフィールドが欲しいです。

横スクロールバーは避けたいし、スマートフォンのランドスケープモードでもポートレートモードでもページのテキストは同じ大きさにしたい。

UPDATE: 写真

私の問題ページ:

問題ページ]1。

**簡易版

簡易版]2です。

ブラウザ幅200pxでの簡易版:。

です。

Community
編集された質問 23日 5月 2017 в 11:47
プログラミング
html css twitter-bootstrap
7日 8月 2012 в 10:33
まだビューはありません
ソリューション

input html タグとそれに対応する .input-* スタイルは、css の width を設定するだけです。 これはデザインによるものです。

しかし、CSSの max-width:100% を追加することで、大きすぎる入力は確実に抑制されます。
例：Headに以下を追加してください。


    input {
        max-width: 100%;
    }
解説 (2)

通常、ある要素の幅を100%にするためには、class="spanX"を持つ要素に、別の class="row-fluid" と class="span12" を使うことが好ましいと思います。これなら、解像度が違ってもバグが発生しません。そこで、span4クラスを持つ要素に別の row-fluid クラスを追加し、その新しい row-fluid の中に span12 を持つ div を追加しています。Bootstrapのデフォルト設定を上書きする必要がある場合もあるので、<input /> 要素内に .my-input クラスも追加して、幅を100%にして左右のパディング（パディングは右側にバグが発生します）を削除しています。そして、以下がそのコードです。

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
            <p>Some Content.</p>
        </div>
        <div class="span4 well">
            <div class="row-fluid">
                <div class="span12">
                    Your Name
                    <input type="text" class="my-input" name="name" id="name" maxlength="100" />
                </div>
             </div>
        </div>
  </div>
</div>

とオーバーライド用のCSSクラス

​.my-input
{
    width: 100%;
    padding: 4px 0 4px 0 !important;
}​

Jsfiddleデモ][1]で確認できますので、画面サイズを変更してみてください。

解説 (4)

この問題に遭遇し、フォーム入力に関するbootstrapのドキュメントを確認したところ、 'Use relative sizing classes like .input-large or match your inputs to grid column sizes using .span* classes.&#39 と記載されていました。

私のブートストラップ行は、コンテンツがspan9、サイドバーがspan3に設定されています。 入力ボックスは、画面サイズが小さくなってもサイドバー内に残ります。

Rich2020
編集した答え 5日 9月 2012 в 9:07
解説 (4)