我正在将 Bootstrap 3 用于博客。在我的自定义 CSS 中，我最近添加了
body {
text-align: justify;
...
}
我喜欢大屏幕（平板电脑、台式机）上的结果。但在小屏幕（电话）上，由于列较窄加上我的博客偶尔使用long-ish-technical-terms-like-this.
我text-align: justify 只能在更大的屏幕上响应吗？
是否可以仅通过 CSS 来实现，或者，我需要编写一些自定义 JS 来实现吗？
问问题
82542 次
9 回答
122
尽管提供的解决方案是绝对正确的，但我认为有一种不同的方法可能会很有趣。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 规则。
于 2014-12-03T08:41:16.870 回答
79
要获得更完整的解决方案，请尝试以下操作：
/*
* 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; }
}
于 2015-03-27T10:17:09.913 回答
37
是的，像这样（你的断点设置在 48em）：
body{
text-align: left;
}
@media screen and (min-width: 48em){
body{
text-align: justify;
}
}
如果视口宽度大于 48em，第二条规则将覆盖第一条。
于 2013-09-03T22:01:05.920 回答
6
现场演示
只需调整窗口大小，您就可以看到text-align:left;如果窗口大小小于400px.
<style>
@media screen and (min-width: 400px) {
.text1 {
text-align: justify;
}
}
p {
text-align: left;
}
</style>
<p class="text1">vlédmjd fsdi dlin dsilncds ids nic dsil dsinc dlicidn lcdsn cildcndsli c dsilcdn isa slia sanil sali as as nds nds lcdsicd insd id nid ndi cas sal sa insalic lic sail il dnsailcn lic il eilwnvrur vnrei svfd nvfn vk in f,vn y,h ky,vnkivn iesnvfilsdnhvidsnvdslin dlindilc ilc lisn asiln sliac lasnl ciasnc in li nsailcn salin ilanclis cliasnc lincls iandlisan dlias casilcn alincalis cli ad lias naslicn aslinc dliasnc slince ineali dliasnc liaslci nasdlicn laincilancfrelvnln dsil cndlic ndlicna linasdlic nsalinc lias</p>
于 2013-09-03T22:01:17.530 回答
6
我喜欢 Alberdigital 和 Fred K 的答案——前者提供了可以在样式表中使用的有效 CSS 代码，后者更彻底。
这是两全其美的。
/*
* Responsive text aligning
* http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
*
* EDITED by Nino Škopac for StackOverflow (https://stackoverflow.com/q/18602121/1325575)
*/
.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: 768px) {
.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: 992px) {
.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: 1200px) {
.text-lg-left { text-align: left; }
.text-lg-right { text-align: right; }
.text-lg-center { text-align: center; }
.text-lg-justify { text-align: justify; }
}
于 2017-06-14T02:08:26.023 回答
2
就我而言，我不喜欢过度使用媒体查询。所以，有时我会以两种方式重复内容。一个自定义对齐，另一个默认对齐。一些代码：
<div class="col-md-6 visible-xs hidden-sm hidden-md hidden-lg">
<%-- Some content here --%>
</div>
<div class="col-md-6 text-right hidden-xs">
<%-- Same content here --%>
</div>
这在某些情况下可能很有用，取决于您在做什么，但请记住，重复大量 HTML 内容不是一个好主意，此解决方案可能仅用于小情况。
于 2017-06-27T15:04:32.030 回答
1
你试过 col-auto 和 mr-auto 吗？更多信息：边距实用程序 随着 v4 中向 flexbox 的迁移，您可以使用 .mr-auto 等边距实用程序来强制同级列彼此分离。
<div class="container">
<div class="row">
<div class="col-auto mr-auto">
<p>Blah</p>
</div>
<div class="col-auto">
<p>Blah</p>
</div>
</div>
</div>
于 2018-06-24T10:17:22.643 回答
-2
它对我有用，试试这个：
text-align: -webkit-center;
于 2017-09-13T08:03:07.673 回答
-6
Bootstrap 中提供了所有“文本对齐”类：只需使用align-lg-left,align-xs-center等...
于 2016-01-15T09:31:39.033 回答