03/19/2019

**Bootstrap 4等高解决方案**

Bootstrap实用工具/flex为相等的高度

活生生的例子在Codepen

由父div固定高度或最小高度的引导类等高

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

.bd-highlight { background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.15); } .fixed-height-200 { min-height: 200px; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <br><br><br> <div class="d-flex align-content-stretch flex-wrap fixed-height-200"> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight bg-danger">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-info">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-light">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item <br> 1111111111</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight bg-primary">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> </div>

我使用clearfix这个超级简单的解决方案，它没有任何副作用。

下面是AngularJS的一个例子:

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

还有一个关于PHP的例子:

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>

我想我只是补充一下，Dr.Flink给出的答案也可以应用到Bootstrap 3表单水平块——如果你想为每个单元格使用背景色，这是非常方便的。为了使这适用于引导表单，您需要包装表单内容，这只是为了复制一个类似表格的结构。

下面的例子还提供了CSS，它演示了一个额外的媒体查询允许Bootstrap 3简单地接管并在较小的屏幕上做正常的事情。这也适用于IE8+。

例子:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>

.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}

试着用弹性盒来做

.container { 显示:flex; padding-bottom: 50 px; ｝ .col { 背景:蓝色; 填充:30 px; ｝ .col。中心{ 背景:红色; 身高:100 px; margin-bottom: -50 px; ｝ < div class = "容器" > < div class = "坳“> < / div > <div class="col center"> center </div> . < div class = "坳“> < / div > < / div >

Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/

您可以将列包装在div中

<div class="row">
<div class="col-md-12>
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>
</div>

之前的一些答案解释了如何使div具有相同的高度，但问题是，当宽度太窄时，div不会堆叠，因此你可以实现他们的答案与一个额外的部分。对于每一个，你可以使用这里给出的CSS名称，除了你使用的行类，所以如果你总是想让div彼此相邻，div应该是这样的:

<div class="row row-eq-height-xs">Your Content Here</div>

对于所有屏幕:

.row-eq-height-xs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: row;
}

当你想使用sm时:

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

当你想要md时:

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

当你想使用lg时:

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

编辑 根据评论，确实有一个更简单的解决方案，但你需要确保从所有尺寸的最大所需宽度到xs(例如<div class="col-md-3 col-sm-4 col-xs-12">:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}