以响应方式更改文本对齐（使用Bootstrap 3）？

Question 1

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

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

我喜欢更大屏幕（平板电脑，台式机）上的结果。但是在小屏幕（电话）上，由于列较窄加上我的博客偶尔使用，所以合理文本无法正常工作long-ish-technical-terms-like-this。

我可以text-align: justify 仅在较大的屏幕上进行响应吗？

是否可以仅通过CSS来做到这一点，还是需要编写一些自定义JS来做到这一点？

Question 2

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

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

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

Question 3

尽管提供的解决方案绝对正确，但我认为还有另一种可能很有趣的方法。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规则。

Question 4

有关更完整的解决方案，请尝试以下操作：

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

Question 5

现场演示

只需调整窗口大小，您就会看到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>

Question 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; }
}

Question 7

就我而言，我不喜欢过度使用媒体查询。因此，有时我会以两种方式重复内容。一个自定义对齐，另一个默认对齐。一些代码：

<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内容不是一个好主意，此解决方案仅适用于小情况。

Question 8

您是否尝试过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>

Question 9

它对我有用，请尝试以下操作：

text-align: -webkit-center;

Question 10

在引导中提供所有的“文字对齐”类：只需使用align-lg-left，align-xs-center等...