Bootstrap：高度=跨度宽度/根据.span2宽度制作一个正方形答案

【问题标题】：Bootstrap: height = span width / make a square based on .span2 widthBootstrap：高度=跨度宽度/根据.span2宽度制作一个正方形
【发布时间】：2015-07-24 14:58:45
【问题描述】：

我想让 div 的高度与“.span2”（基本上是一个正方形）的高度相同，它也可以响应。像这样：

<div class="span2 square>Hello</div>
.span {height: @span2;}

但我在引导程序中找不到工作较少的变量/类或类似的东西。你能帮忙吗？

最好的 68bydesign

【问题讨论】：

首先，span2是动态的吗？您需要为 span2 声明一个静态高度才能使其工作，否则您必须求助于 JS
LESS，是一个预处理器，它在编译时创建一个静态 CSS，它的设计不是按照你想要的方式工作。
您可以尝试使用vw 单元（适用于响应式，但更难），或者简单地使用 JavaScript。

标签： css twitter-bootstrap

【解决方案1】：

我的理解是.span2有这个。

.span2 {
    width:14.364640883%;
}

既然如此，最接近的，没有 JS 解决方案，是视口单元。

注意：这不是一个精确的正方形，但我认为您很难发现差异。

.span2 {
  width: 14.364640883%;
}
.span2.square {
  height: 14.364640883vw;
  border: 1px solid red;
}

&lt;div class="span2 square"&gt;&lt;/div&gt;

【讨论】：