【问题标题】：Change text-align responsively (with Bootstrap 3)?响应式更改文本对齐（使用 Bootstrap 3）？
【发布时间】：2013-09-07 06:27:05
【问题描述】：

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

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

我喜欢大屏幕（平板电脑、台式机）上的结果。但在小屏幕（电话）上，由于列较窄，加上我的博客偶尔使用long-ish-technical-terms-like-this，对齐文本不太适用。

我可以响应式地将text-align: justify 仅显示在更大的屏幕上吗？

是否可以仅通过 CSS 来实现，或者，我需要编写一些自定义 JS 来实现吗？

【问题讨论】：

真正的问题出在哪里——只需将此格式放入适当的媒体查询中，就完成了……
问题只是我自己对“媒体查询”的无知——我不知道 CSS 是否/如何支持条件。
不是 Bootstrap 3 的解决方案，但 Bootstrap 4 似乎提供了原生支持

标签： css twitter-bootstrap-3

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

Live Demo

只需调整窗口大小，如果窗口大小小于400px，您可以看到它如何切换到text-align:left;。

<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>

【讨论】：

【解决方案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 规则。

【讨论】：

我喜欢这个更深入的例子和解释。
这么有趣的解决方案，大赞！
应该是text-justify-xs还是text-xs-justify？我可能是错的，但我的印象是 Bootstrap 以标准 <group>-[<size>-]<modifier> 命名类。
@GreenRaccoon23 见Fred K's solution。

【解决方案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; }
}

【讨论】：

我将此答案与来自Alberdigital's solution 中的媒体查询的 SASS 变量相结合。此解决方案中的 blog post link 也显示了 SASS 中的等价物。
值得注意的是，这不是有效的 CSS 代码；这是 LESS。
如果您使用 SASS / SCSS，只需将 @screen-XX-min 更改为 $screen-XX-min ，如果您在 gulp/grunt/ 或其他预处理器上编译 SASS，它将起作用跨度>

【解决方案5】：

Bootstrap 中提供了所有“文本对齐”类：只需使用align-lg-left、align-xs-center 等...

【讨论】：

据我所知，这不是 Bootstrap 的功能。
我实际上在最新的引导 CSS 文件中寻找了 align-lg-left，但它不存在。

【解决方案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; }
}

【讨论】：

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

【讨论】：

这是个坏主意！
@LuizGonçalves，为什么？我们我批评一些东西，我会提到原因。
这样做你必须将内容传递两次！这对 SEO 不友好并且会增加页面大小，迫使服务器提供两次内容。您可以通过许多其他更好的方式制作，就像我们的朋友在其他答案中解释的那样。
是的，它不是最好的解决方案。但我可以在某些情况下工作。取决于你在做什么。我正在编辑以澄清这一点。

【解决方案8】：

它对我有用，试试这个：

text-align: -webkit-center;

【讨论】：

【解决方案9】：

你试过 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>

【讨论】：