jquery bootstrap中的方形列[已关闭]

s8vozzvw 于 2023-04-20 发布在 jQuery

关注(0)|答案(2)|浏览(121)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
5年前关闭。
这篇文章是编辑并提交审查4小时前.
Improve this question
我试图创建一个网格的广场提供一些导航功能。
正方形表示彩色区域的宽度和高度相等。
我用的是js，但我更喜欢只使用CSS的解决方案，我用的是bootstrap。

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

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

我怎么能只使用css来实现这一点呢？

jquery

来源：https://stackoverflow.com/questions/48428779/square-columns-in-bootstrap

2条答案

按热度按时间

h5qlskok1#

你可以使用这个技巧：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*/
}

阅读链接中的更多内容，了解如何/为什么这样做。

赞(0）回复(0）举报 2023-04-20

mrphzbgm2#

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

赞(0）回复(0）举报 2023-04-20

我来回答

jquery bootstrap中的方形列[已关闭]

2条答案

相关问题

热门标签

最新问答