引导程序中的方柱[关闭]答案

【问题标题】：Square columns in bootstrap [closed]引导程序中的方柱[关闭]
【发布时间】：2018-07-03 20:53:01
【问题描述】：

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

我有它与 js 一起使用，但我不喜欢那个解决方案。我正在使用引导程序 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

【问题讨论】：

您的小提琴不包括 boostrap css。 .container 将设置一个精确的宽度，.col-xs-4 将每个 div 设置为该宽度的 1/3。 .container 宽度是固定宽度，会比你的身体宽度 200 像素宽。每行应该只有 12 个列（所以 3x col-xs-4）。你不需要 jquery，因为宽度已经知道了。
任何 CSS 解决方案都将依赖于display:flex。如果你打算走这条路，你不妨试试 Bootstrap 4，因为你可以使用内置类。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

你可以使用这个技巧：https://mademyday.de/height-equals-width-with-pure-css/

这是一个有效的小提琴：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*/
}

在链接中阅读更多内容以了解其工作原理/原因。

【讨论】：

嘿！我一直在寻找这个解决方案超过2天，终于成功了，非常感谢！但我不明白 css 部分和链接不再工作。你能帮帮我吗？
好像那个网站改变了文章的位置，我已经更新了！

【解决方案2】：

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
        <style type="text/css">
            body {
             
            }
            .gray {
              background-color: lightgray;
            }
            .green {
              background-color: lightgreen;
            }
        </style>
        
        <script>
            function size(){
                
                var divs = document.getElementsByClassName('blockBox');
                var divsWidth = document.getElementsByClassName('blockBox')[0].offsetWidth;

                for (i = 0; i < divs.length; i++) {
                    divs[i].style.height= divsWidth+'px';
                }
                
            }
        </script>
    </head>
    <body onload="size();">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 gray blockBox">1</div>
            <div class="col-xs-4 green blockBox">2</div>
            <div class="col-xs-4 gray blockBox">3</div>
            <div class="col-xs-4 green blockBox">4</div>
            <div class="col-xs-4 gray blockBox">5</div>
            <div class="col-xs-4 green blockBox">6</div>
        </div>
    </div>
    </body>
</html>

【讨论】：