Twitter 的 Bootstrap 2.x 中的响应式文本对齐答案

【问题标题】：Responsive text alignment in Twitter's Bootstrap 2.xTwitter 的 Bootstrap 2.x 中的响应式文本对齐
【发布时间】：2013-06-26 23:24:01
【问题描述】：

在引导程序中，我试图通过将两个文本（标签，A和一些内容，B）组合在一起的设计来实现它们靠近每个其他的，像这样：

A (right-aligned) | B (left-aligned)

在引导程序中使用响应式布局，这看起来很棒，直到网格堆叠在狭窄的窗口上。然后就变成了：

                       |      A (right-aligned)
B (left-aligned)       |

...看起来两者似乎不再相关。

我希望一旦堆叠，元素要么居中，要么都左对齐。

我知道我可以使用 .visible-* 和 .hidden-* 类来解决这个问题，但这感觉就像是 hack。是否有一种简单的方法来更改文本对齐方式以响应引导堆叠网格部分？

【问题讨论】：

你试过pull-left和pull-right吗？
使用最大宽度小于元素组合宽度的媒体查询并将 A 向左对齐

标签： twitter-bootstrap responsive-design text-alignment

【解决方案1】：

在使用 LESS 的 Bootstrap 3 中，我添加了以下内容：

/* Defaults */
.text-center-sm,
.text-center-md,
.text-center-lg,
.text-right-sm,
.text-right-md,
.text-right-lg { text-align: inherit; }

/* Define xs styles after defaults so they take precedence */
.text-center-xs { text-align: center; }
.text-right-xs { text-align: right; }

/* Small grid */
@media (min-width: @screen-tablet) {
  .text-center-sm, .text-center-xs { text-align: center; }
  .text-right-sm, .text-right-xs { text-align: right; }
}

/* Medium grid */
@media (min-width: @screen-desktop) {
  .text-center-md, .text-center-sm, .text-center-xs { text-align: center; }
  .text-right-md, .text-right-sm, .text-right-xs { text-align: right; }
}

/* Large grid */
@media (min-width: @screen-lg-desktop) {
  .text-center-lg, .text-center-md, .text-center-sm, .text-center-xs {
    text-align: center;
  }
  .text-right-lg, .text-right-md, .text-right-sm, .text-right-xs {
    text-align: right;
  }
}

如果您不使用 LESS，请将 @screen-tablet 更改为 768px，将 @screen-desktop 更改为 992px，并将 @screen-lg-desktop 更改为 1200px。

【讨论】：

【解决方案2】：

要右对齐（默认为左对齐），您可以在跨度上使用 text-align:right 。要使这种响应式使用媒体查询仅在大屏幕上应用它：

@media (min-width:768px)
{
  .text-right-responsive {text-align:right;}
  .text-left-responsive {text-align:left;}
}

html:

<div class="container">
<div class="row">
<div class="span6 text-right-responsive">A (right-aligned)</div>
<div class="span6 text-left-responsive">B (left-aligned)</div>
</div> 
</div>

参见：https://stackoverflow.com/a/14809431/1596547，因为 2.3 版 Twitter 的 Bootstrap 也有 text-* 类。所以你可以使用：<div class="span6 text-right">A (right-aligned)</div>。这个类也没有响应。 text-right 仅将 text-align:right 添加到元素的样式中。所以你也需要媒体查询来重置它。重置小屏幕的文本对齐方式：

 @media (max-width:767px)
 {
    .text-right {text-align:left;}
    .text-left {text-align:left;}
 }

pull-right / pull-left 类为元素添加一个浮点数。所以要使用它们，你需要一个额外的包装器：

<div class="container">
<div class="row">
  <div class="span6"><span class="pull-right">A (right-aligned)</span></div>
  <div class="span6"><span class="pull-left">B (left-aligned)</span></div>
</div> 
</div>

在这种情况下，您也可以使用媒体查询。现在您需要为小屏幕重置浮动：

@media (max-width:767px)
{
  .pull-right {float:none;}
  .pull-left {float:none;}
}

演示：http://bootply.com/66024

【讨论】：