如何在Bootstrap 4的小显示器上将列更改为行？

在Bootstrap 4中，当页面缩小到小屏幕设备的宽度时，我们需要将列更改为行。这可以通过媒体查询和类重写来实现。

媒体查询

Bootstrap 4使用媒体查询来实现响应式设计。通过在HTML文件中嵌入媒体查询，可以根据屏幕的大小应用不同的CSS规则。

要将列更改为行，我们可以编写以下媒体查询：

@media (max-width: 575px) {
  .col-sm {
    flex-basis: auto;
    flex-grow: 1;
  }
}

这段代码的意思是，当屏幕宽度小于等于575像素时，将.col-sm类的flex-basis属性设置为auto，将flex-grow属性设置为1。这将使列根据可用空间平均分配行宽，从而将列更改为行。

类重写

除了媒体查询，我们还可以使用顶层类对Bootstrap的样式进行重写。通过为列添加.flex-sm-fill类和.flex-sm-row类，我们可以在小屏幕设备上将列更改为行。这可以通过以下代码实现：

<div class="container">
  <div class="row flex-sm-fill flex-sm-row">
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
  </div>
</div>

这段代码的意思是，在小屏幕设备上，将.row类设置为.flex-sm-fill类和.flex-sm-row类，以使其填满可用空间并将列更改为行。

总结

通过媒体查询和类重写，我们可以在Bootstrap 4的小屏幕设备上将列更改为行。这是响应式设计的重要部分，并且在移动设备上可以提供更好的用户体验。