twitter-bootstrap - 我可以在整个引导网络应用程序中只使用“col-sm”吗

Question

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

标签： twitter-bootstrapbootstrap-4

Answer 1

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

是的，您可以在整个网站上使用 col-sm。需要注意的要点是，在 BootStrap 4 中，它们用于断点的媒体查询添加了min-width和 not max-width。因此，当您使用col-sm-样式时，适用于 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) { ... }