41

更新：ここでの問題のデモ：http：//jsfiddle.net/fdB5Q/embedded/result/

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

767pxより小さく、フォーム領域全体が新しい行にシフトします。ブラウザウィンドウの幅が約200pxのときにレンダリングされるページは、完全に表示されます。フォームフィールドは予想どおりに縮小します。

ビジュアルについては、この非常によく似た質問を見てください： Twitter Bootstrap CSS static-fluid form position

頭の中のすべてがここにあります：

<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に変更しました。それでもオーバーフローする幅の範囲がありました。ディスプレイに余裕があれば、フォームフィールドをもっと広くしたいと思います。

水平スクロールバーを避けたいのですが、スマートフォンの横向きモードまたは縦向きモードでページテキストを同じサイズにしたいのです。

更新：写真

私の問題のページ：

問題のあるページ

簡略化されたバージョン：

シンプルバージョン

ブラウザ幅200ピクセルの簡易バージョン：

幅200pxのシンプルなバージョン

4

8 に答える 8

62

入力htmlタグとそれに対応する.input-*スタイルは、cssのみを設定しwidthます。これは仕様によるものです。

ただし、cssmax-width:100%を追加すると、大きすぎる入力を確実に制御できます。
たとえば、これを頭に追加します。

<style>
    input {
        max-width: 100%;
    } 
</style>
于 2012-08-07T23:19:52.083 に答える
4

通常、私は別の要素を使用しclass="row-fluid"てclass="span12"、class="spanX"ある要素の幅を100％にすることを好みます。異なる解像度でバグが発生することはありません。だから、私はrow-fluidあなたの要素にspan4classを使って別のクラスを追加し、その新しくrow-fluid追加されたdivの中に。を付けましたspan12。必要なものを取得するには、デフォルトのBootstrap設定をオーバーライドする必要があるため、クラス.my-inputinside<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">
                    <label class="control-label" for="name">Your Name</label>
                    <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のデモを見て、画面のサイズを変更してみてください。

</ p>

于 2012-08-07T23:23:29.747 に答える
4

この問題に遭遇し、ブートストラップドキュメントでフォーム入力を確認すると、「。input-largeなどの相対的なサイズ設定クラスを使用するか、.span*クラスを使用して入力をグリッド列サイズに一致させます」と記載されています。

ブートストラップ行は、コンテンツの場合はspan9に、サイドバーの場合はspan3に設定されました。設定<input class='span3'/>によって問題が解決しました。画面サイズが小さくなっても、入力ボックスはサイドバー内に残ります。

于 2012-09-05T09:01:41.940 に答える
1

これらのFOREVERで遊んだ後のほんの少しの入力（そうです）。単純なwidth属性を使用し、コンテナー、パディング、およびその他のcss要因に応じて、85％から95％の間に設定して、入力フィールドが実際にコンテナーの端まで伸びないようにします。

.input-example {
   width: 90%; 
}

私はこれの専門家ではありません！私は学んだことを提供しているだけであり、経験豊富な開発者からのアドバイスとしてこれを受け取らないでください。数え切れないほどの機会に私の命を救ってくれたコミュニティに少しだけ恩返しをしようとしています。

于 2014-02-10T02:59:30.783 に答える
1

残念ながら、問題はこれよりも潜行性があります。max-widthsを使用しても何も起こりませんでした。そして、私はくだらないように見えるものが嫌いなので、少し掘り下げました...

フォームコントロールのcss宣言の次の3行になります。

width: 100%;
padding: 6px 12px;
border: 1px solid #cccccc;

テキストタイプの入力要素の幅が設定されている場合、水平方向のパディングと境界線は、100％から取得されるのではなく、100％に追加されます。したがって、100％の幅wが500pxの場合、テキスト入力フォームコントロールの幅はw + 12 + 12 + 1 + 1、526pxになります。余分な26pxは定数です。つまり、幅のパーセンテージが100％*（w /（w + 26px））または100％-26pxとして動的に計算されない限り、物事は決して出てきません。

私は個人的に、これはhtml / cssインターフェースの定義または実装のいずれかのエラーであると信じています（どちらかはわかりませんが、標準の変化する砂の中から参照を見つけようとはしません）。入力フィールドが100％の幅になるとすると、余白の内側の幅が100％になるように修正を適用する必要があります。水平方向のパディングと境界線の幅が含まれていない場合、100％ではありません。

ちなみに、パーセンテージ値や固定サイズは関係ありません。また、26pxずれています。これらの26pxを幅から除外する必要があります。

ただし、少なくともクライアント側の計算を可能にするCSSコンパイラを使用している場合は、ブートストラップテキスト入力ですべてが失われるわけではありません。少ない、例えば

input.form-control[type=text] {
  width: calc(~'100%-26px');
}

それをすべて良くするでしょう。電子メールとパスワードの種類（少なくとも）にも同じ問題があることに注意してください。

もちろん、26pxは一種の脆弱性ですが、定数はフォーム制御宣言にハードコードされているため、手は一種の結びつきになっています。ブートストラップのアップグレードでCSS宣言の変更をキャッチするために、レンダリングのコントロールのサイズをチェックするテストがあればいいのですが、今夜はそうではありません。ありがとうございます。

于 2015-06-17T02:20:57.560 に答える
0

この回答でPavloが示しているように：Twitter Bootstrap：入力フィールドが十分に拡張されないようにする

input-xlarge（または他のサイズ）の代わりにクラスを使用input-block-levelすると、問題も解決します。

于 2013-06-28T03:05:20.453 に答える
0

フォーム入力とパネル本体でこの問題に遭遇しました。私は次の項目でそれに答えました： Twitter Bootstrap：入力フィールドが十分に拡張されないようにする

私にとっての問題は、フォームが溢れていることでした。これにより、入力がそれに追随することができました。フォームの最大幅（最大幅：100％）を修正することで、入力だけでなく、フォーム内に配置される可能性のあるその他のコンテンツも修正することができました。

于 2015-03-02T15:42:42.973 に答える
0

誰もが見つけるために

HTML：

<input class="form-control" placeholder="Threshold Type">

CSS：

.form-control { box-sizing: border-box; }
于 2019-03-06T21:27:26.803 に答える