нижние выровнять контейнеры с помощью бутстрапа или css

Question

Есть ли способ выровнять все элементы контейнера родительского div с помощью бутстрапа или css. Похоже, каждые отдельные места пункт ребенка в середине родителя:

http://www.bootply.com/Bvp8d2s04w

Вот изображение, пожалуйста замечают детали с красным и зеленым фоном, я хотел бы их вниз выравнивать с родительским контейнером:

Answer 1

Вы могли бы сделать контейнер как flexbox (display: flex) выровняйте все ребенок на дно с align-items: flex-end:

.form-inline { display: flex; align-items: flex-end; } 
 
.form-inline * { margin-bottom: 0; vertical-align: bottom; display: inline-block; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form novalidate="" name="categoryForm" ng-submit="vm.saveCategory()"> 
 
    <div class="form-inline" style="background-color:lightgreen;"> 
 
    <label style="display:inline;">{{ vm.category.name }}</label> 
 
    <input type="button" value="Edit" ng-click="showEditCategory()" style="margin-left:20px" class="btn btn-sm btn-default"> 
 
    <div style="display:inline" ng-show="vm.showEditCategory"> 
 
     <input type="text" ng-model="vm.category.name" id="name" name="name" class="form-control" value="{{vm.category.name}}" required=""> 
 
     <span ng-show="categoryForm.name.$error.required" class="text-warning">Name is required</span> 
 
     <input type="submit" value="Save" class="btn btn-sm btn-success" ng-disabled="categoryForm.$invalid"> 
 
    </div> 
 
    <div style="display:inline" class="label label-danger" ng-show="vm.categoryErrorMessage"> 
 
     {{ vm.categoryErrorMessage }} 
 
    </div> 
 
    <div style="display:inline" ng-show="vm.categorySuccessMessage"> 
 
     <span class="label label-success"> {{ vm.categorySuccessMessage }}</span> 
 
    </div> 
 
    </div> 
 
</form>

jsFiddle: https://jsfiddle.net/azizn/aem1sLwc/

P.S зачем вам это нужно?

Answer 2

.main{ 
 
border:1px solid; 
 
    height: 300px; 
 
    position:relative; 
 
} 
 
.red{ 
 
background:red; 
 
    height: 100px; 
 
    width:100px; 
 
    display:inline-block; 
 
    position:absolute; 
 
    bottom:0px; 
 
} 
 
    
 
.left{ 
 
    
 
    } 
 
.right{ 
 
    right:0px; 
 
    }

<div class="main"> 
 
<div class="red left"></div> 
 
<div class="red right"></div> 
 
</div>

Здесь ............