更改text-align响应（使用Bootstrap 3）？ [英] Change text-align responsively (with Bootstrap 3)?

问题描述

我使用Bootstrap 3作为博客。在我的自定义CSS中，我最近添加了

I'm using Bootstrap 3 for a blog. In my custom CSS, I recently added

body {
    text-align: justify;
    ...
}

我喜欢更大屏幕， 桌面）。但是在小屏幕（手机）上，合理的文本不工作，因为较窄的列和我的博客偶尔使用 long-ish-technical-terms-like-这

I like the result on bigger screens (tablet, desktop). But on small screens (phone), justified text doesn't work very due to the narrower columns plus my blog's occasional use of long-ish-technical-terms-like-this.

我可以在更大的屏幕上作出响应吗？ text-align：justify

Can I responsively have text-align: justify only on bigger screens?

是否可以通过CSS单独执行此操作，还是需要编写一些自定义的JS才能这样做？

Is it possible to do so solely via CSS, or, would I need to write some custom JS to do so?

推荐答案

是，像这样（您的断点设置为48em）：

Yes, like this (where your breakpoint is set at 48em):

body{
    text-align: left;
}
@media screen and (min-width: 48em){
    body{
        text-align: justify;
    }
}

第二个规则将覆盖第一个如果视口宽度大于48em。

The second rule will override the first if the viewport width is greater than 48em.

这篇关于更改text-align响应（使用Bootstrap 3）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！