Question

我想将相同的height应用于div，因为它的宽度是由引导程序中的列类应用的。

假设我有这段代码。 请运行此代码段并以完整页面模式查看。

＆＃13;

.item{
  border: 1px solid red;
  background-color: lightblue;
  height: 50px;
  }

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12">
  </div>
  <div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12">
  </div>
  <div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12">
  </div>
  <div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12">
  </div>
  <div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12">
  </div>
</div>

＆＃13;

所以我想要应用与宽度相同的高度。例如，col-lg-4已应用，item div的宽度为200px。如何将200px高度应用于item？

Answer 1

.item:after{
     display:block;
     content:" ";
     padding-top:100%;
}

item：after伪元素的高度与其父元素的宽度（.item）相同所以＆＃39; .item n＃39;将采用与其宽度相同的高度

Answer 2

equalizer.js能够使特定列的高度相同。

如何在bootstrap中调整任何列类宽度的相同高度？

2 个答案: