twitter-bootstrap 使用 Bootstrap 4 的方形响应式 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46266561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-22 01:04:01 来源:igfitidea点击:
Square responsive divs using Bootstrap 4
提问by Tometoyou
I want to create a grid system similar to this pageusing Bootstrap 4. I want to create a square box in a col-sm-4 and a longer rectangle next to it in a col-sm-8 of the same height. I'm having trouble creating a square box that is responsive. How can I do this?!
我想使用 Bootstrap 4创建一个类似于此页面的网格系统。我想在 col-sm-4 中创建一个方形框，并在相同高度的 col-sm-8 中创建一个长矩形。我在创建响应式方形框时遇到问题。我怎样才能做到这一点？！
Current code:
当前代码：
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text">
first square box.
</div>
<div class="col-sm-8 description-image">
second rectangle box.
</div>
</div>
</div>
Things I've tried:
我尝试过的事情：
- Using jQuery to set the height. This doesn't work with padding on the div, and isn't responsive.
- This linkwhere I managed to get a square box with a rectangle next to it, but as soon as text was added it was no longer a square.
- 使用 jQuery 设置高度。这不适用于 div 上的填充，并且没有响应。
- 这个链接我设法得到一个旁边有一个矩形的方框，但是一旦添加了文本，它就不再是一个正方形。
回答by G-Cyrillus
eventually, a pseudo element could help :
最终，一个伪元素可以帮助：
.col-sm-4:before,
.col-sm-8:before {
content: '';
width: 0;
}
.col-sm-4:before,
.col-sm-8:before,
.ib {
white-space: normal;
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
.col-sm-4:before {
padding-top: 100%;
/* makes expand to a square */
}
.col-sm-8:before {
padding-top: 50%;
/* makes a rectangle half the height of a square */
}
[class^="col"] {
white-space: nowrap;
box-sizing: border-box;
box-shadow: inset 0 0 0 5px white;
padding: 0;
text-align: center;
background: url(http://lorempixel.com/400/200) tomato;
background-size: cover;
}
.row {
color: white;
text-shadow: 0 0 black, 0 0 2px black;
}
.col-sm-4 {
background: gray;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
<div class="col-sm-8 description-image p-0">
second rectangle box.
</div>
</div>
<div class="row section-box">
<div class="col-sm-8 description-image p-0">
<div class="ib">second<br> rectangle box.</div>
</div>
<div class="col-sm-4 text-center description-text p-0">
first square box.
</div>
</div>
</div>回答by Vincent Guyard
You could use bootstrap 4 embed-responsiveclass and it's done
你可以使用 bootstrap 4embed-responsive类就完成了
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row m-5">
<div class="col-1">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-1</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-2">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-2</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-3">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-3</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-4">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-4</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-5">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-5</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-6">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-6</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-7">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-7</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-8">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-8</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-9">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-9</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-10">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-10</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-11">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-11</div>
</div>
</div>
</div>
<div class="row m-5">
<div class="col-12">
<div class="embed-responsive embed-responsive-1by1 text-center">
<div class="embed-responsive-item bg-primary">col-12</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>