web-dev-qa-db-ja.com

Bootstrap 3：input-group / input-group-addonと水平ラベルを使用してカスタム幅を設定します

bootstrap Webサイトのクラス.col-lg-*の概要 ここ を使用して入力要素のサイズを制御したいのですが、<span>要素をdiv内に置くと完全に混乱しますそれまで：

div付きのHTML：

<div class="input-group input-group-lg">
  <label for="" class="control-label">Paycheck</label>
  <div class="col-lg-10">
    <span class="input-group-addon">$</span> 
    <input type="text" class="form-control" id="">
  </div>
</div>

HTML with div

入力要素の幅をすべて同じになるように設定するにはどうすればよいですか？

各入力要素の左マージンを次のように同じ高さにしたいと思います。

lined-up input elements

これは今のように見えます：

current state

これは私の現在のHTMLです：

    <div class="col-md-6">
        <div class="content">
            <h2>Income</h2>
        <form class="form-income form-horizontal" role="form">

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Paycheck</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Investments</label>
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" id=""> 
            </div>

            <div class="input-group input-group-lg">
            <label for="" class="control-label">Other</label>
                <span class="input-group-addon">$</span> 
                <input type="text" class="form-control" id="">
            </div>

            <button class="btn btn-lg btn-primary btn-block" type="submit">Update</button>
        </form>

        </div>

実例： http://jsfiddle.net/jfXUr/

htmlcssformstwitter-bootstraptwitter-bootstrap-3
7
Keven

上記の私のコメントに従って、ラベルと.input-groupを.form-groupコンテナと一緒にグループ化してみてください。

<div class="form-group">
    <label for="" class="control-label">Paycheck</label>
    <div class="input-group input-group-lg">
        <span class="input-group-addon">$</span> 
        <input type="text" class="form-control" id="">
    </div>
</div>

ここでのデモ- http://jsfiddle.net/jfXUr/1/

17
Phil