我有这4张牌,排列成2x2…但是当我在平板电脑版本(iPad)中展示它时,它只占了一半...我怎么能让4张卡片占据整个屏幕,并且让它们的大小相同呢?
的数据
谢谢你的帮助
<style>
body {
background: url("images/fondo_con_formas_op.png") no-repeat center
center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 90%;
}
.columna1,
.columna2,
.columna3,
.columna4,
.columna5 {
width: 100%;
margin: 10px;
}
.boton {
background: #f79206;
color: white;
font-weight: 500;
font-size: 25px;
padding: 10px;
border-radius: 18px;
transition: transform 0.2s;
width: 40%;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
box-shadow: 2px 5px 5px #888888;
text-align: center;
}
@media (min-width: 600px) {
.columna2,
.columna3,
.columna4,
.columna5 {
width: 47%;
background-color: white;
border-radius: 25px;
padding: 15px;
}
}
</style>
<body style="display: grid; place-items: center">
<div class="container">
<section class="columna1">
<div class="boton">Selecciona tu pedido</div>
</section>
<section class="columna2">
<div style="cursor: pointer" onclick="window.location='fin.html';">
<div class="row g-0">
<div
class="col-md-4 m-0 row justify-content-center align-items-center"
>
<img
src="images/shot 18.png"
class="img-fluid rounded-start"
alt="..."
/>
</div>
<div
class="col-md-8 m-0 row justify-content-center align-items-center"
>
<div class="card-body">
<h5 class="card-title color-text">EL GENIO X JUICE +18</h5>
<p class="card-text color-text">Delicioso shot de mora azul.</p>
</div>
</div>
</div>
</div>
</section>
<section class="columna3">
<div style="cursor: pointer" onclick="window.location='fin.html';">
<div class="row g-0">
<div
class="col-md-4 m-0 row justify-content-center align-items-center"
>
<img
src="images/shot 18.png"
class="img-fluid rounded-start"
alt="..."
/>
</div>
<div
class="col-md-8 m-0 row justify-content-center align-items-center"
>
<div class="card-body">
<h5 class="card-title color-text">EL GENIO X JUICE +18</h5>
<p class="card-text color-text">Delicioso shot de mora azul.</p>
</div>
</div>
</div>
</div>
</section>
<section class="columna4">
<div style="cursor: pointer" onclick="window.location='fin.html';">
<div class="row g-0">
<div
class="col-md-4 m-0 row justify-content-center align-items-center"
>
<img
src="images/regalo.png"
class="img-fluid rounded-start"
alt="..."
/>
</div>
<div
class="col-md-8 m-0 row justify-content-center align-items-center"
>
<div class="card-body">
<h5 class="card-title color-text">REGALO SORPRESA</h5>
<p class="card-text color-text"></p>
</div>
</div>
</div>
</div>
</section>
<section class="columna5">
<div style="cursor: pointer" onclick="window.location='fin.html';">
<div class="row g-0">
<div
class="col-md-4 m-0 row justify-content-center align-items-center"
>
<img
src="images/merch.png"
class="img-fluid rounded-start"
alt="..."
/>
</div>
<div
class="col-md-8 m-0 row justify-content-center align-items-center"
>
<div class="card-body">
<h5 class="card-title color-text">EL GENIO X MERCH</h5>
<p class="card-text color-text"></p>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="bootstrap/js/bootstrap.min.js"></script>
字符串
我用的是bootstrap。我想实现这个设计
的
1条答案
按热度按时间9udxz4iz1#
首先,如果
columna1
不应该在容器中,只需将其移出容器:字符串
在你的body中删除inline样式,并在下面添加这个,使其成为一个100vh的flex容器:
型
然后在你的容器中,将它设置为增长,它将增长以填充可用的空间:
型