如何自动扩展列高度并垂直对齐其内容？

Question

我正在尝试将前三个col-md-1 div的高度扩展到行最大高度，该高度由两个col-md-5扩展，并且还垂直对齐其内容。我正在使用bootstrap中的网格系统。

<div class="row load-container">
  <div class="col-md-1">{{Id}}</div>
  <div class="col-md-1"><img src="images/{{statusIcon Status}}" /></div>
  <div class="col-md-1"><div class="info-bubble info-bubble-small middle-align {{statusClass}}">{{Class}}</div></div>
  <div class="col-md-5 container">
    <div class="row">{{From.Name}}</div>
    <div class="row">{{From.City}} {{From.State}}, {{From.Zip}}</div>
    <div class="row">{{pickupFormatted}}</div>
  </div>
  <div class="col-md-5 container">
    <div class="row">{{To.Name}}</div>
    <div class="row">{{To.City}} {{To.State}}, {{To.Zip}}</div>
    <div class="row">{{deliveryFormatted}}</div>
    <div class="row">{{expectedFormatted}}</div>
  </div>
  <div class="col-md-1">
    {{Weight}}
  </div>
  <div class="col-md-2">
    {{Distance.text}}
  </div>
  <div class="col-md-2">
    {{Duration.text}}
  </div>
  <div class="col-md-4">

  </div>
</div>

编辑： 除了列宽不再影响实际宽度之外，以下是排序方法。

.load-container {
    padding: 5px;
    display: table;
    width: 100%;
}


.load-container [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

忍者编辑： 这似乎现在有效

.load-container [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: middle;
}