我如何使用引导程序制作图像图块/网格/拼贴?

问题描述 投票:0回答:1

我正在尝试在网页上制作4张图片的图块,但看起来很乱。我不知道如何安排。

我希望它覆盖页面的整个宽度,但具有高度590像素。

我该如何实现?

使用Bootstrap 4.4

这就是我想要的; The arrangement

html css twitter-bootstrap bootstrap-4 css-grid
1个回答
0
投票

您用Grid Layouts完成

请检查下面给出的示例,这里我默认情况下只是设置高度,但是您可以根据自己的要求设置高度。 .grid-container > div {max-height: 590px;min-height: 590px;}

.item2{grid-area:Iamge1}
			.item1{grid-area:Iamge3}
			.item3{grid-area:Iamge4}
			.item4{grid-area:Iamge2}
			
			.grid-container {
				display: grid;
				grid-template-areas: 'Iamge1 Iamge2 Iamge2' 'Iamge1 Iamge3 Iamge4';
				grid-gap: 0px;
				background-color: transparent;
				padding: 10px;
			}
			
			.grid-container > div {
				background-color: #00A2E8;
				text-align: center;
				padding: 20px 0;
				font-size: 24px;
				color: #fff;
				max-height: 150px;
				min-height: 150px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: sans-serif;
				border: 1px solid #000000;
			}
			
			.grid-container > div.item2 {
				height: auto;
				max-height: initial;
			}
			
			@media (max-width:479.98px) {
				.grid-container {
					display: block;
				}
				.grid-container > div {
					margin-bottom: 10px;
                    max-height: 290px;
					min-height: 290px;
				}
			}
			
			@media (min-width:480px) and (max-width:575.98px) {
				.grid-container > div {
					max-height: 70px;
					min-height: 50px;
				}
			}
			
			@media (min-width:576px) and (max-width:767.98px) {
				.grid-container > div {
					max-height: 100px;
					min-height: 80px;
				}
			}
			
			@media (min-width:768px) and (max-width:991.98px) {
				.grid-container > div {
					max-height: 130px;
					min-height: 110px;
				}
			}
<div class="grid-container">
			<div class="item2">Iamge1</div>
			<div class="item1">Iamge3</div>
			<div class="item3">Iamge4</div>
			<div class="item4">Iamge2</div>
		</div>
© www.soinside.com 2019 - 2024. All rights reserved.