2016-06-10 46 views
0

我想實現一個像下面的網格。有一個問題,因爲我也有表單組。問題是,col-md-6在最後一個和最後一個沒有正確對齊。自舉網格與空白窗體組col-md-6

<form action=""> 
 
    <div class="col-md-1 pull-right text-right padding-right-0"> 
 
    <div class="action-buttons"> 
 
     <a href="#" class="pull-right button-edit-content" data-target="#s3"> 
 
     <i class="fa fa-pencil" aria-hidden="true"></i> 
 
     </a>    
 
    </div> 
 
    </div> 
 
    <div class="form-group col-md-6"> 
 
    <label for="">label_1</label> 
 
    <input type="text"> 
 
    </div> 
 
    <div class="form-group col-md-5"> 
 
    <label for="">label_2</label> 
 
    <input type="text"> 
 
    </div> 
 
    <div class="form-group col-md-6"> 
 
    <label for="">label_3</label> 
 
    <input type="text"> 
 
    </div> 
 
    <div class="form-group col-md-5"> 
 
    &nbsp; 
 
    </div> 
 
    <div class="form-group col-md-6"> 
 
    <label for="">label_5</label> 
 
    <input type="text"> 
 
    </div> 
 
    <div class="form-group col-md-5"> 
 
    <label for="">label_6</label> 
 
    <input type="text"> 
 
    </div> 
 
</form>

enter image description here

回答

1

嘗試在排包裝他們,就像

<div class="row"> 
     <div class="form-group col-md-6"> 
     <label for="">label_1</label> 
     <input type="text"> 
     </div> 
     <div class="form-group col-md-5"> 
     <label for="">label_2</label> 
     <input type="text"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group col-md-6"> 
     <label for="">label_3</label> 
     <input type="text"> 
     </div> 
     <div class="form-group col-md-5"> 
     <div>&nbsp;</div> 
     </div> 
    </div> 
0

我想我看到你想要做什麼。我認爲問題在於沒有相似高度的空欄。

我建議去除空列,並加入了類,它在這個小提琴清除以下一個左:https://jsfiddle.net/vv807bax/

CSS:

.clearleft { 
    clear: left; 
} 

HTML:

<div class="container"> 
<div class="row"> 
<form action=""> 
    <div class="col-md-1 pull-right text-right padding-right-0"> 
    <div class="action-buttons"> 
     <a href="#" class="pull-right button-edit-content" data-target="#s3"> 
     <i class="fa fa-pencil" aria-hidden="true"></i> 
     </a>    
    </div> 
    </div> 
    <div class="form-group col-md-6"> 
    <label for="">label_1</label> 
    <input type="text"> 
    </div> 
    <div class="form-group col-md-5"> 
    <label for="">label_2</label> 
    <input type="text"> 
    </div> 
    <div class="form-group col-md-6"> 
    <label for="">label_3</label> 
    <input type="text"> 
    </div> 
    <div class="form-group col-md-6 clearleft"> 
    <label for="">label_5</label> 
    <input type="text"> 
    </div> 
    <div class="form-group col-md-5"> 
    <label for="">label_6</label> 
    <input type="text"> 
    </div> 
</form> 
</div> 
</div> 
+0

或者您可以使用引導程序的清除: