引导程序中的方柱

Question

我正在尝试创建一个正方形网格以提供一些导航功能。

我有它与js一起使用，但我不喜欢这种解决方案。我正在使用Bootstrap 3

<div class="container">
<div class="row">
    <div class="col-xs-4" style="background-color: lightgray"></div>
    <div class="col-xs-4" style="background-color: lightgreen"></div>
    <div class="col-xs-4" style="background-color: lightgray"></div>
    <div class="col-xs-4" style="background-color: lightgreen"></div>
    <div class="col-xs-4" style="background-color: lightgray"></div>
    <div class="col-xs-4" style="background-color: lightgreen"></div>
</div>
</div>

var divs = $(".row > div");
var width = divs.width();
divs.height(width)

如何仅使用CSS实现它？

jsfiddle

Answer 1

您可以使用此技巧：http : //www.mademyday.de/css-height-equals-width-with-pure-css.html

这是一个工作的小提琴：https : //jsfiddle.net/65mhv1cp/

基本上，您可以将一个类添加到您的正方形中，称之为 square

<div class="row">
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
</div>

CSS将是：

.square:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

在链接中了解更多信息，以了解其工作原理。