Bootstrap 4 间距断点混淆

如何解决Bootstrap 4 间距断点混淆

似乎很多人对 Bootstrap 的断点和间距实用程序有一些困惑，在解决了他们的问题后，我仍然没有解决我的问题。当屏幕大于 xs 时，我试图将左右填充应用于我的元素 - 否则，只需给它 px-2。

class GeneralObject
{

    protected static $_instance = array();

    public static function getInstance()
    {
        $class = get_called_class();

        if(!isset(self::$_instance[$class]))
        {
            self::$_instance[$class] = new $class;
        }

        return self::$_instance[$class];
    }
}

然而，这行不通。我的代码将默认为 <header class="entry-header container-fluid px-2 px-xl-5"> 并忽略 px-2。如果我删除 px-2，那么 px-xl-5 间距将起作用。如何在这些不同的屏幕尺寸上获得不同的间距？这似乎是一个如此简单的问题，但由于某种原因，我无法弄清楚。

解决方法

“当 屏幕大于 xs"

那么您将使用 px-sm-5，而不是 px-xl-5，因为 px-sm-* 的意思是“小 (576px) 及以上”，而 `px-xl- * 表示“超大（1200 像素）及以上”

Codeply