A Pen by Dino Wang.

index.html

<div class="container-fluid">
    <form>
        <fieldset>
            <legend>Basic Information (Standard Form)</legend>
            <div class="row-fluid">
                <div class="control-group span4">
                    <label class="control-label">姓名</label>
                    <div class="controls">
                        <input type="text" name="date" placeholder=".input-block-level works fine!" class="input-block-level" />
                    </div>
                </div>        
                <div class="control-group span4">
                    <label class="control-label">職業</label>
                    <div class="controls">
                        <div class="input-append">
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-chevron-down"></i></span>
                        </div>
                    </div>
                </div>        
                <div class="control-group span4">
                    <label class="control-label">生日</label>
                    <div class="controls">
                        <div class="input-prepend input-append">
                            <span class="add-on"><i class="icon icon-time"></i></span>
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-remove"></i></span>
                            <span class="add-on btn"><i class="icon icon-calendar"></i></span>
                        </div>
                    </div>
                </div>        
            </div>        
            <div class="row-fluid">
                <div class="control-group span4">
                    <label class="control-label">來源</label>
                    <div class="controls">
                        <div class="input-append">
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-remove"></i></span>
                            <span class="add-on btn"><i class="icon icon-chevron-down"></i></span>
                        </div>
                    </div>
                </div>        
                <div class="control-group span8">
                    <label class="control-label">週期</label>
                    <div class="controls">
                        <div class="input-append">
                            <input type="text" name="date" placeholder="這願望可能只有神龍能夠實現..." class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-calendar"></i></span>
                            <span class="add-on btn">14天</span>
                            <span class="add-on btn">30天</span>
                            <span class="add-on btn">60天</span>
                        </div>
                    </div>
                </div>        
            </div>        
        </fieldset>
    </form>
  
    <form class="form-horizontal">
        <fieldset>
            <legend>Basic Information (Form Horizontal)</legend>
            <div class="row-fluid">
                <div class="control-group span4">
                    <label class="control-label">姓名</label>
                    <div class="controls">
                        <input type="text" name="date" placeholder=".input-block-level works fine!" class="input-block-level" />
                    </div>
                </div>        
                <div class="control-group span4">
                    <label class="control-label">職業</label>
                    <div class="controls">
                        <div class="input-append">
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-chevron-down"></i></span>
                        </div>
                    </div>
                </div>        
                <div class="control-group span4">
                    <label class="control-label">生日</label>
                    <div class="controls">
                        <div class="input-prepend input-append">
                            <span class="add-on"><i class="icon icon-time"></i></span>
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-remove"></i></span>
                            <span class="add-on btn"><i class="icon icon-calendar"></i></span>
                        </div>
                    </div>
                </div>        
            </div>        
            <div class="row-fluid">
                <div class="control-group span4">
                    <label class="control-label">來源</label>
                    <div class="controls">
                        <div class="input-append">
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-remove"></i></span>
                            <span class="add-on btn"><i class="icon icon-chevron-down"></i></span>
                        </div>
                    </div>
                </div>        
                <div class="control-group span8">
                    <label class="control-label">週期</label>
                    <div class="controls">
                        <div class="input-append">
                            <input type="text" name="date" placeholder="這願望可能只有神龍能夠實現..." class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-calendar"></i></span>
                            <span class="add-on btn">14天</span>
                            <span class="add-on btn">30天</span>
                            <span class="add-on btn">60天</span>
                        </div>
                    </div>
                </div>        
            </div>        
        </fieldset>
    </form>

    <form>
        <fieldset>
            <legend>Basic Information (Controlled Standard Form)</legend>
            <div class="row-fluid">
                <div class="control-group span4">
                    <label class="control-label">姓名</label>
                    <div class="controls">
                        <input type="text" name="date" placeholder=".input-block-level works fine!" class="input-block-level" />
                    </div>
                </div>        
                <div class="control-group span4">
                    <label class="control-label">職業</label>
                    <div class="controls">
                        <div class="input-append block btns-1">
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-chevron-down"></i></span>
                        </div>
                    </div>
                </div>        
                <div class="control-group span4">
                    <label class="control-label">生日</label>
                    <div class="controls">
                        <div class="input-prepend input-append block btns-3">
                            <span class="add-on"><i class="icon icon-time"></i></span>
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-remove"></i></span>
                            <span class="add-on btn"><i class="icon icon-calendar"></i></span>
                        </div>
                    </div>
                </div>        
            </div>        
            <div class="row-fluid">
                <div class="control-group span4">
                    <label class="control-label">來源</label>
                    <div class="controls">
                        <div class="input-append block btns-2">
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-remove"></i></span>
                            <span class="add-on btn"><i class="icon icon-chevron-down"></i></span>
                        </div>
                    </div>
                </div>        
                <div class="control-group span8">
                    <label class="control-label">週期</label>
                    <div class="controls">
                        <div class="input-append block btns-6">
                            <input type="text" name="date" placeholder="這願望可能只有神龍能夠實現..." class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-calendar"></i></span>
                            <span class="add-on btn">14天</span>
                            <span class="add-on btn">30天</span>
                            <span class="add-on btn">60天</span>
                        </div>
                    </div>
                </div>        
            </div>        
        </fieldset>
    </form>
  
    <form class="form-horizontal">
        <fieldset>
            <legend>Basic Information (Controlled Form Horizontal)</legend>
            <div class="row-fluid">
                <div class="control-group span4">
                    <label class="control-label">姓名</label>
                    <div class="controls">
                        <input type="text" name="date" placeholder=".input-block-level works fine!" class="input-block-level" />
                    </div>
                </div>        
                <div class="control-group span4">
                    <label class="control-label">職業</label>
                    <div class="controls">
                        <div class="input-append block btns-1">
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-chevron-down"></i></span>
                        </div>
                    </div>
                </div>        
                <div class="control-group span4">
                    <label class="control-label">生日</label>
                    <div class="controls">
                        <div class="input-prepend input-append block btns-3">
                            <span class="add-on"><i class="icon icon-time"></i></span>
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-remove"></i></span>
                            <span class="add-on btn"><i class="icon icon-calendar"></i></span>
                        </div>
                    </div>
                </div>        
            </div>        
            <div class="row-fluid">
                <div class="control-group span4">
                    <label class="control-label">來源</label>
                    <div class="controls">
                        <div class="input-append block btns-2">
                            <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-remove"></i></span>
                            <span class="add-on btn"><i class="icon icon-chevron-down"></i></span>
                        </div>
                    </div>
                </div>        
                <div class="control-group span8">
                    <label class="control-label">週期</label>
                    <div class="controls">
                        <div class="input-append block btns-6">
                            <input type="text" name="date" placeholder="這願望可能只有神龍能夠實現..." class="input-block-level" />
                            <span class="add-on btn"><i class="icon icon-calendar"></i></span>
                            <span class="add-on btn">14天</span>
                            <span class="add-on btn">30天</span>
                            <span class="add-on btn">60天</span>
                        </div>
                    </div>
                </div>        
            </div>        
        </fieldset>
    </form>
</div>

style.scss

@import "compass";
$add-on-width: 27px;
$control-label-width: 70px;

@for $n from 1 through 10 {
  .block.btns-#{$n} {
    padding-right: $add-on-width * $n; 
  }
}

.input-append.block, 
.input-prepend.block, 
.form-horizontal .input-prepend.block,
.form-horizontal .input-append.block {
  display: block;
  .input-block-level {
    width: 100%;
  }
}

.form-horizontal {
  .control-label {
    width: $control-label-width;
  }
  .controls {
    margin-left: $control-label-width + 10px;
  }
}

讓-Bootstrap-表單更加整齊可控.markdown

讓 Bootstrap 表單更加整齊可控

A Pen by Dino Wang on CodePen.

License.