bootstrap表單布局，輸入框和圖標對齊處理

1.先看截圖
圖片描述

想讓輸入框的左邊和保持一條直線
右邊也保持一條直線

2.使用的是bootstrap的靜態(tài)框
代碼如下：


                                <div class="form-group">
                                    <label for="task_begintime" class="col-sm-3 control-label">開始時間</label>

                                    <div class="col-sm-9 input-group date " id="datepicker1" >

                                    <input type="text" class="form-control" id="task_begintime" name="task_begintime">
                                        <span class="input-group-addon col-sm-1">
                                            <i class="glyphicon glyphicon-calendar"></i>
                                        </span>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="task_endtime" class="col-sm-3 control-label">結(jié)束時間</label>

                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="task_endtime" name="task_endtime">
                                    </div>
                                </div>

4.不太了解bootstrap的長度設(shè)置以及相對關(guān)系，遇到過的朋友，歡迎給個提示

回答

編輯回答

選擇

一個 class 影響 "input-group"

2017年11月15日 22:26

編輯回答

怪痞

查看bootstrap網(wǎng)格嵌套添加div 已經(jīng)解決了，新問題是這個

<div class="form-group">
                                    <label for="task_begintime" class="col-sm-3 control-label">開始時間</label>

                                    <div class="col-sm-9 input-group date row" id="datepicker1" >
                                        <div class="col-sm-11" style="margin-right: -15px">
                                           <input type="text" class="form-control" id="task_begintime" name="task_begintime">
                                        </div>
                                        <div class="col-sm-1" style="margin-left: -15px; margin-right:30px">
                                            <span class="input-group-addon">
                                            <i class="glyphicon glyphicon-calendar" style="font-size: 18px"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>

現(xiàn)在是右邊沒有對齊調(diào)整margin-right也不行

更新線

參考鏈接https://www.cnblogs.com/jiqin...
修改代碼如下：

 <div class="form-group row">
   <div class="left col-sm-3 text-right">
       <label for="task_begintime" class="control-label">開始時間</label>
   </div>
   <div class="right col-sm-9 ">

        <div class="input-group date">
             <input type="text" class="form-control " id="task_begintime" name="task_begintime">
             <span class="input-group-addon">
                   <span class="glyphicon glyphicon-calendar" aria-hidden="true">                           
                   </span>
                   </span>
         </div>
     </div>
</div>

效果圖如下

如果你也遇到了相似的問題，也可以參考下上面的鏈接，特別是要求對齊等操作

2018年2月13日 03:59