如何使用bootstrap的移动一流课程

Question

我无法理解bootstrap 4的移动优先行为。我一向都是为台式机设计的，然后从那里移下来。

文本居中就是我不知道如何进行的地方之一。

例如，我希望段落位于小于768像素的屏幕上。

因此，我查阅了文档https://getbootstrap.com/docs/4.0/utilities/text/，发现了类text-md-center，并认为这是我所需要的。它将文本放置在不大于768像素的中等宽度屏幕上。

但是使用它却与我所想的相反-它以大于768像素的屏幕大小居中显示文本。

我假设这就是所谓的“移动优先”。这不是桌面优先设计吗？如何仅在较小宽度的设备上居中显示文本？

Answer 1

将2个类应用于您的段落：text-center和text-md-left。

text-center表示默认情况下文本居中，然后text-md-left表示在768px或更大的屏幕上将其左对齐。

Answer 2

从不喜欢Twitter Bootstrap等前端框架。

无论如何，这基本上就是它的内幕

@media screen and (min-width: 768px) {
    .text-md-center {
        text-align: center;
    }
}

所以您可以像这样添加自己的类。

@media screen and (max-width: 768px) {
    .mobile-text-center-md {
        text-align: center;
    }
}

无论如何只是一个例子。然后使用.mobile-text-center-md类将文本放置在宽度小于768px的设备上。