twitter-bootstrap – Twitter的Bootstrap 2.x中的响应式文本对齐

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

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

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

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

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

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

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

解决方法

在使用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-xs { text-align: right; }
}

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

如果您没有使用LESS,请将@ screen-tablet更改为768px,将@ screen-desktop更改为992px,将@ screen-lg-desktop更改为1200px.