6

在引导程序中，我试图通过让它们彼此靠近来实现将两条文本（标签A和一些内容B ）分组的设计，如下所示：

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

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

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

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

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

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

4

2 回答 2

10

在使用 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-desktopto992px和@screen-lg-desktopto 1200px。

于 2014-04-07T21:11:44.997 回答
1

要右对齐（默认为左对齐），您可以在跨度上使用 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

于 2013-06-29T12:03:23.153 回答