在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.