162

もう一度更新します。質問を本当に理解せずに回答を追加しないように、一番上の回答を選択して、この質問を閉じています。実際には、グリッドを使用したり追加の css を追加したりせずに組み込み機能でそれを行う方法はありません。help-blockたとえば、短い入力を超える必要がある要素を扱っている場合、グリッドはうまく機能しませんが、それらは「組み込み」です。それが問題である場合は、こちらの BS3 ディスカッションで見つけることができる追加の css クラスを使用することをお勧めします。BS4 がリリースされたので、含まれているサイジングスタイルを使用してこれを管理できるようになったため、これは長くは関係ありません。この人気のある SO の質問に対する良い意見をありがとう。

更新:この質問は、グリッドに頼らずに入力幅を管理する BSの組み込み機能に関するものであるため、未解決のままです (場合によっては、個別に管理する必要があります)。私はすでにこれを管理するためにカスタム クラスを使用しているため、これは基本的な CSS のハウツーではありません。このタスクは BS機能のディスカッション リストにあり、まだ対処されていません。

元の質問: BS 3 で入力幅を管理する方法を見つけた人はいますか? 現在、その機能を追加するためにいくつかのカスタム クラスを使用していますが、文書化されていないオプションを見落としている可能性があります。

現在のドキュメントでは .col-lg-x を使用するように言われていますが、コンテナ div にしか適用できず、あらゆる種類のレイアウト/フロートの問題が発生するため、明らかに機能しません。

これがフィドルです。奇妙なことに、フィドルではフォーム グループのサイズを変更することさえできません。

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
4

17 に答える 17

71

ブートストラップ 3 では

カスタム スタイルを簡単に作成できます。

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

次に、次のようにフォーム コントロールに追加します。

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

これにより、HTML にレイアウト用の余分なマークアップを配置する必要がなくなります。

于 2014-06-03T06:48:54.460 に答える
25

ASP.net MVC は Content-Site.css に移動し、次の行を削除またはコメントします。

input,
select,
textarea {
    /*max-width: 280px;*/
}
于 2015-04-24T15:09:28.280 に答える
11

col-lg-4入力を a 内にラップし、次に 内にラップする必要があると思います。form-groupすべてがform-horizontal..に含まれます。

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

Bootply のデモ - http://bootply.com/78156

編集： Bootstrap 3のドキュメントから..

Bootstrap では、入力、選択、およびテキストエリアはデフォルトで 100% 幅です。インライン フォームを使用するには、内部で使用されるフォーム コントロールに幅を設定する必要があります。

別のオプションは、CSS を使用して特定の幅を設定することです。

.form-control {
    width:100px;
}

または、col-sm-*を「form-group」に適用します。

于 2013-08-31T09:43:49.487 に答える
5

これが古いスレッドであることは知っていますが、インライン フォームで同じ問題が発生し、上記のオプションのいずれも問題を解決しませんでした。だから私はインラインフォームを次のように修正しました:-

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

それが私の解決策でした。少しハッキーなハックですが、インラインフォームの仕事をしました。

于 2016-02-05T01:53:30.303 に答える
4

style 属性を追加するか、css ファイルに入力タグの定義を追加できます。

オプション 1: style 属性を追加する

<input type="text" class="form-control" id="ex1" style="width: 100px;">


オプション 2: CSS での定義

input{
  width: 100px
}

自動で100pxを変更できます

お役に立てれば幸いです。

于 2016-04-15T16:34:15.500 に答える
3

ブートストラップ 3 では

.form-control を持つすべてのテキスト < input >、< textarea >、および < select > 要素は width: 100% に設定されます。デフォルトで。

http://getbootstrap.com/css/#forms-example

場合によっては、入力に必要な最大幅を手動で設定する必要があるようです。

とにかく、あなたの例はうまくいきます。大きな画面で確認すると、名前とメールのフィールドが 2/12 になっていることがわかります (col-lg-1 + col-lg-1 で 12 列あります)。ただし、画面が小さい場合 (ブラウザーのサイズを変更するだけ)、入力は行の最後まで拡大されます。

于 2013-11-03T16:44:37.477 に答える
1

私も同じ問題に苦しんでおり、これが私の解決策です。

HTML ソース

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

入力コードを別の div クラスでカバーする

CSS ソース

.input_width{
   width: 450px;
}

対象の div クラスに任意の幅またはマージン設定を指定します。

Bootstrap の入力幅は常にデフォルトで 100% であるため、幅はカバーされた幅に従います。

これは最善の方法ではありませんが、私が問題を解決した最も簡単で唯一の解決策です。

これが役に立ったことを願っています。

于 2015-10-15T16:24:43.017 に答える
0

Content フォルダー内の site.css ファイルを見落としているように見える理由がわかりません。このファイルの 22 行目を見ると、入力を制御するための設定が表示されます。あなたのサイトはこのスタイル シートを参照していないようです。

私はこれを追加しました：

input, select, textarea { max-width: 280px;}

あなたのフィドルに、それはうまく動作します。

bootstrap.css または bootstrap.min.css を更新しないでください。そうすると、ブートストラップが更新されたときに失敗するように設定されます。そのため、site.css ファイルが含まれています。ここで、探しているレスポンシブ デザインを提供するサイトに変更を加えることができます。

これが機能するフィドルです

于 2016-02-22T04:20:30.413 に答える