6

Twitter-Bootstrapの入力幅/CSSクラスに関して、私はしばらく頭を悩ませてきました。クライアントの住所情報を含むフォームがあります。「名前」(ファーストネーム、ミドルネーム、ラストネーム) とインラインフォーム/行を作成したいと思います.3つの入力の結果、残りの入力の幅が等しくなります(を使用class="input-xxlarge")。

各入力で「input-*」(例:「input-small」) を使用すると、幅が広すぎるか、(合計で) 狭すぎます。

<div class="control-group">
    <label class="control-label" for="FirstName">Name</label>
    <div class="controls">
        <input class="input-small" id="FirstName" name="FirstName" placeholder="First name" type="text" value="" />
        <input class="input-small" id="MiddleName" name="MiddleName" placeholder="Middle name" type="text" value="" />
        <input class="input-small" id="LastName" name="LastName" placeholder="Last name" type="text" value="" />
    </div>
</div>

http://jsfiddle.net/RXGKN/

パーセント幅（インライン）を設定することも解決策ではありません。これを行うことができた人はいますか?左側と右側の両方が残りの入力 (レスポンシブを含む) に「完璧」に適合しますか?

「input-xxlarge」の幅に等しい「行」を定義し、「control-group」>「controls」の各入力で spanX (例: span4) を使用する方法はありますか。

4

1 に答える 1

11 
<div class="control-group">
  <label class="control-label" for="FirstName">Name</label>
    <div class="controls row-fluid">
        <div class="span2 row"><input class="span12" id="FirstName" name="FirstName" placeholder="Firstname" type="text" value="" /></div>
        <div class="span2 row"><input class="span12" id="MiddleName" name="MiddleName" placeholder="Middlename" type="text" value="" /></div>
        <div class="span2 row"><input class="span12" id="LastName" name="LastName" placeholder="Lastname" type="text" value="" /></div>
        <p class="help-block span12 row" style="color: red;">How do I make these 3 input's (together) equal width of the "Adresse" input.</p>
    </div>
</div>
<div class="control-group">
  <label class="control-label" for="AddressLine1">Adresse</label>
  <div class="controls row-fluid">
    <div class="span6 row"><input class="span12" id="AddressLine1" name="AddressLine1" placeholder="AddressLine1" type="text" value="" /></div>
  </div>
</div>

http://jsfiddle.net/baptme/RXGKN/2/

于 2012-06-10T13:32:48.870 に答える