загрузочная сетка с пустой группой форм col-md-6

Question

Я хотел бы получить сетку, как внизу. Есть проблема, потому что у меня тоже есть группа форм. И проблема в том, что 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>

Answer 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> 

Answer 2

Я думаю, что я вижу, что вы пытаетесь сделать. Я думаю, что проблема заключается в пустой столбец, который не имеет сопоставимой высоты с другими.

Я хотел бы предложить, что удаление пустого столбца и очистку слева от следующего, добавляя класс к нему, как в этой скрипке: 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>