Javascript bootstrap中的方柱

我试图创建一个方格来提供一些导航功能

我使用js，但我不喜欢这种解决方案。我正在使用Bootstrap3

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

var divs=$（“.row>div”）；
var width=divs.width（）；
分区高度（宽度）

我怎样才能只用css实现它

您可以使用以下技巧：

这是一把小提琴：

基本上，您可以向方块中添加一个类，称之为

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>

请阅读链接中的更多内容，了解其工作原理。

提供头衔
身体{
}
格雷先生{
背景颜色：浅灰色；
}
格林先生{
背景颜色：浅绿色；
}
函数大小（）{
var divs=document.getElementsByClassName（'blockBox'）；
var divsWidth=document.getElementsByClassName（'blockBox'）[0].offsetWidth；
对于（i=0；i

您的小提琴不包括boostrap css

.container

将设置精确的宽度，

.col-xs-4

将每个div设置为该宽度的1/3

.container

宽度是一个固定宽度，将比您的身体宽度200px宽。每行应该只有12列（所以是3列xs-4）。你不需要jquery，因为宽度已经知道了。任何CSS解决方案都依赖于

display:flex

。如果你要走这条路，你不妨试试Bootstrap4，因为你可以利用baked in类。嘿！我一直在寻找这个解决方案超过2天，最后它的工作，非常感谢！但是我不明白css部分和链接不再工作了。你能帮帮我吗？看来那个网站改变了文章的位置，我已经更新了！

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