web-dev-qa-db-ja.com

インライン形式内の全角テキスト入力のブートストラップ

私はコンテナ領域の幅全体に収まるテキストボックスを作成するのに苦労しています。

<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">           
                <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, Zip)">
                <button type="submit" class="btn btn-lg">Search</button>            
        </form>
    </div>
</div>

上記のようにすると、2つのフォーム要素は予想通りインラインになっていますが、せいぜい数列を超えないようにしてください。 firebugのcol-md-12 divの上にカーソルを置くと、予想される全幅が占められます。塗りつぶされていないように見えるのは単なるテキスト入力です。私はインライン幅の値を追加しようとさえしましたが、それは何も変更しませんでした。私はこれが単純であるべきであることを知っています。

これはフィドルです。 http://jsfiddle.net/52VtD/4119/embedded/result/

編集：

選ばれた答えはあらゆる点で徹底的で素晴らしい助けです。それが私が使ってしまったものです。 しかし、私の最初の問題は、実際にはVisual Studio 2013内のデフォルトのMVC5テンプレートの問題であると思います。これはSite.cssに含まれていました。

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

明らかにそれはテキスト入力が適切に拡大することを妨げていました...将来のASP.NETテンプレートユーザへの公正な警告...

htmlcsstwitter-bootstrap-3
131
Killnine

ブートストラップドキュメント はこれについて述べています ：

カスタム幅が必要ブートストラップでは、入力、選択、およびテキストエリアはデフォルトで100％幅です。インラインフォームを使用するには、その中で使用されているフォームコントロールに幅を設定する必要があります。

フォームでform-controlクラスを使用する場合、すべてのフォーム要素がクラスform-inlineを取得したときに取得するデフォルト幅の100％は適用されません。

Bootstrap.css（または.less、好きなものは何でも）を見れば、この部分がわかります。

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    [...]
  }
}

たぶんあなたは input-groups を見てみるべきでしょう、私は彼らがあなたが使いたいマークアップを正確に持っていると思いますので（実用的なフィドル こちら ）：

<div class="row">
   <div class="col-lg-12">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, Zip)">
      <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="submit">Search</button>
      </span>
    </div>
  </div>
</div>
83
morten.c

このようなものを見てください：

<form role="form">  
    <div class="row">
      <div class="col-xs-12">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" />
          <div class="input-group-btn">
            <button type="submit" class="btn">Search</button>
          </div><!-- /btn-group -->
        </div><!-- /input-group -->
      </div><!-- /.col-xs-12 -->
    </div><!-- /.row -->
</form>

http://jsfiddle.net/n6c7v/1/

29
haxxxton

同様の質問 で述べたように、input-groupクラスのインスタンスを削除して、それが役立つかどうか確認してください。

ブートストラップを参照します。

個々のフォームコントロールは自動的に何らかのグローバルスタイルを受け取ります。 text、、および.form-controlを持つ要素はすべてwidth：100％に設定されています。デフォルトで最適な間隔になるようにラベルとコントロールを.form-groupで囲みます。

9
kurdtpage