在屏幕调整大小时将布局从行更改为网格

Question

我有一个非常具体的用户体验请求。我在一个容器中有四个 link，一个相邻排成一排，中间用一条竖线隔开。

示例：

Link一个 | Link两个| Link三个| Link四个

如果它们都适合容器，这就是布局。一旦用户减小屏幕尺寸并且 link 不再适合，我想将布局切换为 2 行和 2 列。并在行之间有一个水平分隔线。此外，links 的存在是可变的。如果只有三个 link，则第三个 link 会扩展到整个底行。

示例：

Link一个 | Link两个

Link三个| Link四个

或

Link一个 | Link两个

Link三个

如果可能的话，我想在不使用 JS 的情况下实现此行为。理想情况下使用 Flexbox 或 Bootstrap。可能吗？

Answer 1

您可以尝试使用网格和媒体查询：

.container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   text-align: center;
   margin: 1em;
}
a {
  border-right: 1px solid grey;
}
a:last-child {
   border-right: none;
}
@media screen and (max-width: 500px) {
 .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .container a:nth-child(1), a:nth-child(2) {
    border-bottom: 1px solid grey;
  }
  a:nth-child(2) {
    border-right: none;
  }
  a:nth-child(3):last-child {
    grid-column: 1/3;
  }
}

<div class="container">
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
  <a>Link 4</a>
</div>

<div class="container">
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</div>

在屏幕调整大小时将布局从行更改为网格

Change layout from row to grid on screen resize

html

css

window-resize

flexbox

bootstrap-4