twitter-bootstrap - Bootstrap Responsive での Fluid input-append

Question

流動的なレイアウトで正しい幅を持つために、input-append 要素を使用して入力を取得するのに苦労しています。Bootstrap の v2.0.4 を使用しています。ページを小さくするためにサイズを変更すると、改行に分割されます。理想的には、入力をウェルの全幅にします (アラートのように)。マークアップといくつかのスクリーンショットを以下に含めました。どんな助けでも大歓迎です！

<div class="row-fluid">
    <div class="span3 well">
       <form class="form-horiztonal">
           <h2>Filters</h2>
           <fieldset>
               <div class="control-group">
                   <label class="control-label" for="msisdn">MSISDNs</label>
                   <div class="controls">
                       <div class="input-append">
                           <input class="span10" id="msisdn" size="" type="text" name="msisdn"><button
                           class="btn btn-primary" type="submit"><i class="icon-plus icon-white"></i></button>
                       </div>
                   </div>
                </div>
           </fieldset>
       </form>
    </div>

    <div class="span9"></div>
</div>

Answer 1

<form class="form-horiztonal">と置き換えます<form id="formfilters" class="form-horiztonal">

次の jQuery コードを追加します。

function sizing() {
  var formfilterswidth=$("#formfilters").width();
  $("#msisdn").width((formfilterswidth-46)+"px");
}
$(document).ready(sizing);
$(window).resize(sizing);​

そして、それは常によく見えます

小さな：

大きい：

Answer 2

レスポンシブ CSS がこれをつまずかせています。

を使用してレスポンシブ CSS の一部をオーバーライドすることにより、

  #msisdn {
    width: 75%;
    display: inline-block;
  }

うまくいけば、何が起こっているかを見ることができます。これにより、うまくいけば十分に近づくことができます。

Answer 3

これは純粋な CSS ソリューションであり、レイアウト目的で厄介な jQuery/JavaScript を使用する必要はありません。

http://jsfiddle.net/9Ma8V/

HTML

<div class="inline-button-input">
   <input type="submit" value="Submit"/>
   <div>
      <input type="text"/>
   </div>
</div>

CSS

input[type=text] {
   width: 100%;
}
.inline-button-input {
   width: 100%;
   float: right;
}
.inline-button-input div {
   overflow: hidden;
   padding-right: .5em;
}
.inline-button-input input[type=submit] {
   float: right;
}