的Javascript：

Question

我正在使用AngularJS和Bootstrap 3和SASS构建Web应用程序。我希望连续的所有列都具有相同的高度。提供A Bootply。

问题在于我不知道items数组中子集的大小，因为它来自服务器，子集的大小影响列的高度。因此，我不想为所有列使用固定高度。该解决方案还适用于多种屏幕尺寸（col-xs到col-lg）我觉得这可以纯粹用CSS而不是JavaScript黑客来处理。

重复列表如下所示：

的Javascript：

  $scope.items = [{
    name: 'one',
    subset: [{name: 'one-one'}, {name: 'one-two'},{name: 'one-three'}]
  }, {
    name: 'two',
    subset: [{name: 'two-one'}, {name: 'two-two'}]
  }];

HTML：

<div class="row">
  <div ng-repeat="item in items">
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
      <div class="menu-item">
        <div class="menu-item-header">
          <span>{{item.name}}</span>
        </div>
        <div ng-repeat="subitem in item.subset">
          <span>{{subitem.name}}</span>  
        </div>
        <button class="btn btn-default">Do Something</button>
        </div>
      </div>
   </div>
</div>

CSS：

.menu-item {
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
}

.menu-item-header {
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}

Answer 1

Flexbox可以做到这一点，但这并没有得到很好的支持。

你最好的选择是伪造它。而不是担心使列具有相同的高度，而是使用包含所有列的元素。默认情况下，它会扩展以适应身高最高的孩子。

然后，应用一个偷偷摸摸的背景图像，给出边框或背景颜色的错觉：

.row{
    background: url(sneaky.png) repeat-y;
}

这个技巧已经存在了一段时间：http://alistapart.com/article/fauxcolumns

使用FLEXBOX进行更新

将Flexbox用于相同高度的列是微不足道的。将flexbox应用于父级：

<div class="row" style="display:flex;">

而且......你已经完成了。所有孩子都有相同的身高我为每个col的课程添加了一个名为div的课程，并且背景颜色和边距都可以让你知道他们的身高都是一样的。

http://www.bootply.com/120891

Answer 2

我找到了这个解决方案，你可以在这里查看演示 -

http://getbootstrap.com.vn/examples/equal-height-columns/

它为你的.row使用插件类，并且该行中的项目具有相同的高度。适用于IE 10+，现在对我来说没问题。

/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

/*
 * Styles copied from the Grid example to make grid rows & columns visible.
 */
.container {
  padding-right: 15px;
  padding-left: 15px;
}

h4 {
  margin-top: 25px;
}
.row {
  margin-bottom: 20px;
}
.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

/*
 * Callout styles copied from Bootstrap's main docs.
 */
/* Common styles for all types */
.bs-callout {
  padding: 20px;
  margin: 20px 0;
  border-left: 3px solid #eee;
}
.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code {
  background-color: #fff;
  border-radius: 3px;
}
/* Variations */
.bs-callout-danger {
  background-color: #fdf7f7;
  border-color: #d9534f;
}
.bs-callout-danger h4 {
  color: #d9534f;
}
.bs-callout-warning {
  background-color: #fcf8f2;
  border-color: #f0ad4e;
}
.bs-callout-warning h4 {
  color: #f0ad4e;
}
.bs-callout-info {
  background-color: #f4f8fa;
  border-color: #5bc0de;
}
.bs-callout-info h4 {
  color: #5bc0de;
}

Bootstrap 3列在一行中相同的高度

的Javascript：

HTML：

CSS：

2 个答案: