我可以在整个 bootstrap web 应用程序中只使用 `col-sm`

如何解决我可以在整个 bootstrap web 应用程序中只使用 `col-sm`

我一直在努力对 Bootstrap 4 断点有一个很好的理解，但我遇到了一些困难。由于该框架是为移动优先开发的，我可以在整个网站项目中只使用 col-sm 或 sm 并让设备完成其余的处理吗？我对何时以及如何使用和组合 xs,sm,md,lg and xl

感到困惑

解决方法

我可以在我的整个网站项目中只使用 col-sm 或 sm 并让设备完成其余的处理吗？

是的，您可以在整个网站上使用 col-sm。需要注意的要点是，在 BootStrap 4 中，它们用于断点的媒体查询添加了 min-width 而不是 max-width。因此，当您使用 col-sm- 时，样式适用于 ABOVE 576 像素的每个屏幕。

这些是 bootstrap 分别用于 xs、sm、md、lg、xlg 的断点。

// Extra small devices (portrait phones,less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones,576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets,768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops,992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops,1200px and up)
@media (min-width: 1200px) { ... }