我想要一个具有x列的响应式布局,该布局在lg
屏幕尺寸(justify-content-between
)上每行显示3列。屏幕小于lg
时,所有x列都应堆叠在彼此下方,并且应justify-content-center
对齐。
我要牢记这一点,要做到这一点:围绕列的列div应该完全相同,因此我可以轻松地将第7列与第3列切换,而不必对单个列div进行更改。
这是我到目前为止所拥有的:
<div class="d-flex justify-content-between">
<div class="col-lg">
<div style="width: 288px;" class="justify-content-center bg-primary">col 1</div>
</div>
<div class="col-lg">
<div style="width: 288px;" class="justify-content-center bg-secondary">col 2</div>
</div>
<div class="col-lg">
<div style="width: 288px;" class="justify-content-center bg-warning">col 3</div>
</div>
<div class="col-lg">
<div style="width: 288px;" class="justify-content-center bg-primary">col 4</div>
</div>
<div class="col-lg">
<div style="width: 288px;" class="justify-content-center bg-secondary">col 5</div>
</div>
<div class="col-lg">
<div style="width: 288px;" class="justify-content-center bg-warning">col 6</div>
</div>
</div>
如您所见,我有两个主要问题:
.col
中会中断justify-content-between
非常感谢您的帮助!
答案 0 :(得分:1)
好吧,如果CSS Grid是一个选项,这就是我想到的。只需定义网格属性即可,非常简单,因此每行只有3列,彼此隔开,并且使用简单的媒体查询将它们堆叠在一起,我将其设置为Bootstrap中 large 断点的宽度
让我知道这是否符合您的需求!
.grid {
display: grid;
grid-template-columns: repeat(3, 288px);
grid-auto-rows: minmax(100px, auto);
justify-content: space-between
}
.grid-item {
border: 1px solid black;
}
@media (max-width: 992px) {
.grid {
grid-template-columns: 288px;
justify-content: center;
}
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>