Live Demo

Question

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

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

我喜欢大屏幕（平板电脑，台式机）上的结果。但是在小屏幕（手机）上，由于较窄的列以及我的博客偶尔使用long-ish-technical-terms-like-this，合理的文本不起作用。

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

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

Answer 1

虽然提供的解决方案是绝对正确的，但我认为有一种不同的方法可能很有趣。 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 2

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

/*
 * 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; }
}

Answer 3

是的，就像这样（你的断点设置在48em）：

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

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

Answer 4

Live Demo

只需调整窗口大小，您就可以看到如果窗口大小小于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>

Answer 5

我喜欢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; }
}

Answer 6

在我的情况下，我不喜欢媒体查询过度使用。所以，有时我会以两种方式重复内容。一个自定义对齐，另一个默认对齐。一些代码：

<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不是一个好主意，此解决方案可能仅用于小型案例。

Answer 7

您是否尝试过col-auto和mr-auto？进一步的信息：Margin utilities 通过在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>

Answer 8

它对我有用，试试这个：

text-align: -webkit-center;

Answer 9

所有＆＃34; text-align＆＃34; Bootstrap中提供了类：只需使用The program waited patiently for this callback to finish.，align-lg-left等等......

响应文本对齐（使用Bootstrap 3）？

9 个答案:

Live Demo