Question

我想要一个具有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>

JSFiddle here。

如您所见，我有两个主要问题：

将列包装在.col中会中断justify-content-between
第4列，第5列第6列应自动转到下一行。

非常感谢您的帮助！

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

如何使可对齐内容中心对齐到可堆叠列

1 个答案: