html - 如何在 Bootstrap 中调整与任何列类的宽度相同的高度？

Question

我想对 div 应用与 Bootstrap 中列类应用的宽度相同的高度。

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

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

<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>

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

Answer 1

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

item:after 伪元素的高度与其父元素 (.item) 的宽度相同
所以'.item'将采用与宽度相同的高度