在Twitter的Bootstrap 2.x中响应文本对齐

Question

在bootstrap中,我试图通过让它们彼此靠近来实现将两个文本(标签,A和一些内容,B)组合在一起的设计,如下所示:

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

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

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

......看起来这两个不再相关.

我希望一旦堆叠,元素既可以居中也可以左对齐.

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

Answer 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-desktopto 992px,@screen-lg-desktopto 1200px.

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

右拉/左拉类向元素添加浮动。因此，要使用它们，您将需要一个额外的包装器：

<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