CSS 在 Bootstrap 4中 `col-xs-*` 无法正常工作

在本文中，我们将介绍Bootstrap 4中的问题，即CSS中的col-xs-*无法正常工作的情况。我们将讨论背景、原因以及解决方案。

阅读更多：CSS 教程

背景

Bootstrap是一个流行的前端框架，被广泛用于构建响应式布局。在Bootstrap 3中，可以使用col-xs-*来定义小屏幕设备上的列宽度。然而，在Bootstrap 4中，这个类被移除了，而使用了更加灵活的栅格系统。

原因

在Bootstrap 4中，col-xs-*已被移除是因为响应式设计已经发展了许多年，现在有许多小屏幕设备，例如手机和平板电脑，可以显示更多的内容。因此，col-xs-*这样的类不再需要。相反，Bootstrap 4采用了更加简洁和直观的类命名方式，将不同屏幕大小的设备分为四个类别：col-sm-*，col-md-*，col-lg-*和col-xl-*。

解决方案

要解决Bootstrap 4中无法使用col-xs-*的问题，我们需要根据不同的屏幕大小，使用适当的类来定义列宽度。

对于小屏幕设备，在CSS中使用col-12类定义列宽度为100%。
对于中等屏幕设备，在CSS中使用col-md-*类来定义列宽度。
对于大屏幕设备，在CSS中使用col-lg-*类来定义列宽度。

以下是一个示例代码，展示了如何在Bootstrap 4中定义不同屏幕大小的列宽度：

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <p>This column will take full width on small screens, half width on medium screens, and one-third width on large screens.</p>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <p>This column will take full width on small screens, half width on medium screens, and one-third width on large screens.</p>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <p>This column will take full width on small screens, half width on medium screens, and one-third width on large screens.</p>
    </div>
  </div>
</div>

在上面的代码中，我们使用了col-12，col-md-*和col-lg-*来定义不同屏幕大小下的列宽度。这样，我们就能够在Bootstrap 4中达到与col-xs-*相同的效果。

除了以上解决方案，我们还可以通过自定义CSS来实现类似于col-xs-*的效果。在自定义CSS中，我们可以使用媒体查询来针对不同屏幕大小设置列宽度。

@media (max-width: 767.98px) {
  .col-xs-* {
    width: 100%;
  }
}

通过使用上面的CSS代码，我们可以将col-xs-*的效果应用于Bootstrap 4。

总结

在本文中，我们讨论了在Bootstrap 4中，CSS中的col-xs-*无法正常工作的问题。我们了解了背景和原因，并提供了解决方案。通过使用col-12，col-md-*和col-lg-*，或者通过自定义CSS，我们可以在Bootstrap 4中达到与col-xs-*相同的效果。要实现更好的响应式布局，建议使用Bootstrap 4最新的栅格系统。