鍍金池/ 問答/HTML5  HTML/ bootstrap怎么樣不用div包裹,讓兩個(gè)輸入框在同一行顯示

bootstrap怎么樣不用div包裹,讓兩個(gè)輸入框在同一行顯示

1.因?yàn)槭褂昧薭ootstrapValidator校驗(yàn)框架,兩個(gè)輸入框包裹在一個(gè)form-group里面,導(dǎo)致其中一個(gè)輸入框輸錯(cuò),另外一個(gè)輸入框樣式也會(huì)變,想實(shí)現(xiàn),每一個(gè)輸入框用一個(gè)div包裹起來,然后讓兩個(gè)輸入框還能在同一行顯示

圖片描述

代碼如下

<div class="form-group">

                    <label class="col-lg-2 control-label">建筑物總數(shù)</label>
                    <div class="col-lg-4">
                        <div class="input-group">
                            <input type="text" class="form-control"  name="building" id="building">
                            <div class="input-group-addon">棟</div>
                        </div>
                    </div>
                    <label class="col-lg-2 control-label">用地面積</label>
                    <div class="col-lg-4">
                        <div class="input-group">
                            <input type="text" class="form-control" name="landarea" id="landarea">
                            <div class="input-group-addon">平方米</div>
                        </div>
                    </div>
                    
                </div>

回答
編輯回答
墨小白

兩個(gè)輸入框分別放在兩個(gè) form-group中包裹起來。 然后在兩個(gè)form-group最外層再包裹一層 form-inline即可。

<div class="form-inline">
    <div class="form-group">controls</div>
    <div class="form-group">controls</div>
</div>
2017年1月9日 19:53
編輯回答
陪我終
.row
  .col-1.form-group
  .col-1.form-group   
2018年8月5日 11:46