1. 程式人生 > >bootstrap 表單 label 和 input 實現左標籤右輸入佈局

bootstrap 表單 label 和 input 實現左標籤右輸入佈局

首先直接貼效果圖


要求就是label和input的輸入框 這樣排列,下面是程式碼 加註釋

                <%--首先表單垂直佈局 form-horizontal --%>
                <div class="form-horizontal">
                    <fieldset>
                        <%--form-group 實現這個一個組--%>
                        <div class="form-group">
                            <%--label標籤佔十二列中間的兩列 control-label使標籤居左對齊--%>
                            <label class="col-sm-2 control-label">暱 稱:</label>
                                <%--佔七列 並且造一個input組--%>
                            <div class="col-sm-7 input-group">
                                <input type="text" class="form-control">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-user"></span>
                                </span>
                            </div>
                        </div>
                    </fieldset>
                </div>