ブートストラップ3の入力幅

もう一度更新します。質問を本当に理解せずに人々が回答を追加できないように、上の回答を選択してこの質問を閉じます。実際には、グリッドを使用したり、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>

あなたがしたいことは確かに達成可能です。

必要なのは、フォーム全体を1行だけでなく、各「グループ」を1行にラップすることです。ここに：

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

私が作成した新しいjsfiddle： 新しいjsfiddle

新しいフィドルでは、「col-xs-5」も追加したので、小さい画面でも確認できることに注意してください。これらを削除しても違いはありません。ただし、元のクラスでは「col-lg-1」のみを使用していることに注意してください。つまり、画面の幅が「lg」メディアクエリサイズよりも小さい場合、デフォルトのブロック動作が使用されます。基本的に 'col-lg-1'を適用するだけで、使用するロジックは次のようになります。

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

詳細については、Bootstrap 3グリッドシステムを参照してください。それ以外の場合はお知らせください。詳しく説明します。

ブートストラップ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のレイアウトに追加のマークアップを配置する必要がなくなります。

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

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

入力を内にラップし、col-lg-4次に内にラップする必要があると思います。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-*「フォームグループ」に適用します。

現在のドキュメントは.col-xs-xを使用するように言っており、lgはありません。それから私はバイオリンを試してみましたが、うまくいくようです：

http://jsfiddle.net/tX3ae/225/

レイアウトを維持するには、次のようにクラスの「行」を配置する場所を変更できます。

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

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

http://jsfiddle.net/tX3ae/226/

<div class="form-group col-lg-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

クラスをform.groupに追加して、入力を制約します

Visual Studio 15でMaster.Siteテンプレートを使用している場合、ベースプロジェクトには、フォームコントロールフィールドの幅を上書きする "Site.css"があります。

テキストボックスの幅を取得して、幅が約300pxを超えるようにすることができませんでした。私はすべてを試しましたが、何もうまくいきませんでした。問題の原因となっているSite.cssに設定があることがわかりました。

これを取り除くと、フィールド幅を制御できます。

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

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

<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>

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

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

オプション1：スタイル属性を追加する

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

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

input{
  width: 100px
}

あなたは自動で100pxを変更することができます

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

ブートストラップ3

すべてのテキスト形式の<input>、<textarea>、および<select>要素は、.form-controlを使用して幅100％に設定されます。デフォルトでは。

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

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

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

あなたは単純なCSSをあきらめる必要はありません:)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

Bootstrapの入力要素の幅を好みに応じて単純に縮小または拡大する場合max-widthは、CSSで使用します。

これが私が作成した非常に単純な例です：

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

フォーム全体の最大幅を500pxに設定しました。これにより、Bootstrapのグリッドシステムを使用する必要がなくなり、フォームの応答性も維持されます。

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

HTMLソース

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

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

CSSソース

.input_width{
   width: 450px;
}

カバーされたdivクラスに幅またはマージン設定を指定します。

ブートストラップの入力幅は常にデフォルトで100％なので、幅はカバーされた幅に従います。

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

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

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

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

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

あなたのフィドルに、それはうまくいきます。

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

ここでそれが働いているフィドルです

style=""入力フィールドにの用語を追加して定義します。これは、入力フィールドを処理する最も簡単な方法です。例：

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

ブートストラップは「フォーム入力」クラスを使用して、「入力フィールド」の属性を制御します。単純に、CSSファイルまたはヘッドセクションに、希望の幅、境界線、テキストサイズなどを含む独自の「フォーム入力」クラスを追加します。

（または、bodyセクションの入力属性にsize = '5'インラインコードを直接追加します。）

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 

Bootstrap 3以下を使用して、優れたレスポンシブフォームレイアウトを実現しました。

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>