更改文本-响应对齐(使用Bootstrap 3)？

Question

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

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

我喜欢在更大的屏幕上(平板电脑、台式机)的结果。但是在小屏幕(手机)上，对齐的文本效果不是很好，因为它的栏目比较窄，而且我的博客偶尔也会使用long-ish-technical-terms-like-this。

我只能在更大的屏幕上使用text-align: justify吗？

是否可以仅通过CSS来完成此操作，或者，我是否需要编写一些自定义JS来完成此操作？

Answer 1

是的，就像这样(你的断点设置为48em)：

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

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

Answer 2

虽然提供的解决方案是绝对正确的，但我认为还有一种不同的方法可能会很有趣。Bootstrap不提供依赖于窗口大小的对齐类，但您可以定义它们：

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

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .text-justify-sm {
        text-align: justify;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .text-justify-md {
        text-align: justify;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .text-justify-lg {
        text-align: justify;
    }
}

然后，您可以将这些类添加到html元素中：

<body class="text-justify-lg">

您还可以为text-left-xx和text-right-xx创建css规则。

Answer 3

要获得更完整的解决方案，请尝试以下内容：

/*
 * Responsive text aligning
 * http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
 */
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: @screen-sm-min) {
  .text-sm-left { text-align: left; }
  .text-sm-right { text-align: right; }
  .text-sm-center { text-align: center; }
  .text-sm-justify { text-align: justify; }
}

@media (min-width: @screen-md-min) {
  .text-md-left { text-align: left; }
  .text-md-right { text-align: right; }
  .text-md-center { text-align: center; }
  .text-md-justify { text-align: justify; }
}

@media (min-width: @screen-lg-min) {
  .text-lg-left { text-align: left; }
  .text-lg-right { text-align: right; }
  .text-lg-center { text-align: center; }
  .text-lg-justify { text-align: justify; }
}