Question

在bootstrap中，我试图通过让它们靠近每个文本（一个标签， A ，以及一些内容 B ）来设计一个设计其他，像这样：

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

在bootstrap中使用自适应布局，这看起来很棒，直到网格堆叠在狭窄的窗口上。然后它变成：

                       |      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-desktop更改为992px，将@screen-lg-desktop更改为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;}
}

DEMO：http://bootply.com/66024

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

2 个答案: