如何使用bootstrap自定义不同设备的文本对齐方式？

Question

我使用bootstrap 3的文本对齐类时遇到问题。我希望每次视图端口（设备）更改时我的网站文本对齐都会更改，即在大型设备文本对齐时将保留小设备这是对的，我怎么能得到这个？请帮助并举例说明。

Answer 1

你不能用引导类来做，你必须用CSS media queries来做：

/* xs */
.yourClass { text-align: right; }

/* sm */
@media(min-width:768px) {
    .yourClass { text-align: right; }
}

/* md */
@media(min-width:992px) {
    .yourClass { text-align: left; }
}

/* lg */
@media(min-width:1200px) {
    .yourClass { text-align: left; }
}

仅使用必要的媒体查询。如果您希望xs右对齐，并且从sm到lg左对齐，只需使用xs（这不是媒体查询，请记住Bootstrap 3是移动的第一个）和sm一个。

修改 Example