1

Firefox を使用すると、次のフォームの幅が適切に制限されません。代わりに、画面全体に広がりますが、Chrome ではそうではありません。

<form class="form-horizontal" role="form">
    <legend class="righter">Legend</legend>
    <div class="form-group">
        <label for="title" class="col-lg-2 control-label">Title</label>
        <div class="col-lg-4">
            <input type="text" class="form-control" id="title" placeholder="..." />
        </div>
    </div>
    <div class="form-group">
        <label for="id" class="col-lg-2 control-label">UUID</label>
        <div class="col-lg-4">
            <input type="text" class="form-control" id="description" placeholder="..."/>
        </div>
    </div>
</form>

JSFiddle では、Firefox と同様に動作します: http://jsfiddle.net/dy5KP/1/

次の図のようにして (マークを除く)、入力の幅を狭くするにはどうすればよいですか?

ここに画像の説明を入力

4

3 に答える 3

2

ブートストラップ グリッド

ある時点で、BootStrap Grid Systemはフィールドを折りたたもうとします。

4 つのグリッド クラスがあります。

  • col-xs-*:モバイル、スタックしない
  • col-sm-*:タブレット、 768ピクセル未満のスタック
  • col-md-*:ラップトップ、 992ピクセル未満のスタック
  • col-lg-*:デスクトップ、 1200ピクセル未満のスタック

jsFiddle でコードを見るときの問題の 1 つは、見る領域が少ないことです。コードを Firefox で開き、フィドル名に/showを追加すると、画面を 1200 ピクセルより広くすることで適切な動作を得ることができます。画像は記事下部をご覧ください

解決

1 つの解決策は、上記のリストから小さいグリッド列を選択して、ブレーク ポイントを狭めることです。

<div class="form-group">
    <label for="title" class="col-xs-2 control-label">Title</label>
    <div class="col-xs-4">
        <input type="text" class="form-control" id="title" placeholder="..." />
    </div>
</div>

ここにフィドルがあります：jsFiddle

どの画面幅でも次のようになります。

デモ

詳細については、Bootstrap CSS ページの Horizo​​ntal Formsを参照してください。

ブレークポイントのデモ

1200pxでブレークすることで、デモが正しく機能していることを証明します。

1199px :

デモ1199

1200px :

デモ1200

于 2013-09-16T23:20:41.893 に答える
0

Bootstrap でフォームを処理する最善の方法は、必要な幅にmax-widthを使用することです。そのため、次のことを行う必要があります。

1- コードをそのまま続行しますが、col-lg-2 と col-lg-4 を変更します

col -lgのみ

2- css ファイルで ---- フォームを対象とするクラスに、またはフォームの周りをダイブするか、単にこれを行います。

.form-group input {
   display: block;
   max-width: 180px;
   vertical-align: middle;
   height: 45px;
   margin: 5px auto;
   padding: 10px 20px;
 }

最大幅:幅を設定する値を入力します。高さ:フィールドの高さの値を入力します。

これがあなたを助けることを願っています。

于 2013-09-17T01:32:55.470 に答える
0

このcssを使用してみてください

.form-group input {
width: 180px;
float: right;
margin-right: 150px

}

.form-group ラベル { float: 左 }

フィドル

于 2013-09-16T22:52:36.503 に答える