css - twitter-bootstrap入力フィールドの最大幅

Question

最新のTwitterブートストラップフレームワークを使用して、次の設定を行いました。

http://jsfiddle.net/hfexR/2/

横にボタンがない場合に、入力フィールドが最大幅になるようにします。

純粋なcssまたはtwitter-bootstrap自体を使用してこれを行うにはどうすればよいですか？

インラインブロックのようなものが行くはずです、私は今それを取得していません...

Answer 1

このフィドルのように、クラス入力ブロックレベルを使用できます

<div class="container">
  <div class="span4 well">
    <form class="form-search">
      <input type="text" class="input-block-level search-query">
    </form>
    <form class="form-search">
      <input type="text" class="input-medium search-query">
      <button type="submit" class="btn">Cancel</button>
    </form>
  </div>
</div>

Answer 2

編集：ブートストラップv3以降、クラスが進化したため、col-xx-Xクラスを使用して、以下で説明する結果を取得します（さらに変更が必要な場合があります）

---

ライブデモ（jsfiddle）

.row-fluidを使用.spanXして、入力をコンテナに入力させることができます。

<form class="form-search">
  <div class="row-fluid">
      <input type="text" class="input-medium search-query span12">
  </div>
</form>
<form class="form-search">
  <div class="row-fluid">
      <input type="text" class="input-medium search-query span8">
      <button type="submit" class="btn span4">Cancel</button>
  </div>
</form>

ボタンと入力の組み合わせには少し修正が必要なようです。

/* May not be the best way, not sure if BS has a better solution */
/* Fix for combining input and button spans in a row */
.row-fluid > input + button[class*="span"] {
    float: none;           /* Remove the */
    display: inline-block; /* floating   */
    margin-left: 0;        /* Stick it to the left */
}

.spanX最後に、組み合わせてはいけません。との境界線などが.wellあるため、ここに理由の例を示します（jsfiddle）。padding