html - Bootstrap 行的中心内容，但在列时对齐

Question

我想知道在 Bootstrap 中是否有一种方法可以让 row 中的 col-* 元素的内容在排列时左对齐或右对齐作为列，但内容在排列为行时要居中对齐。

例如，以这个简单的行为例:

<div class="row">
    <div class="col-sm-8">
        Lorem ipsum
    </div>
    <div class="col-sm-4">
        Lorem ipsum
    </div>
</div>

当显示为列时，每个div的内容应该分别左对齐和右对齐。但是当在较小的视口(viewport)中作为行查看时，它们应该居中。

Answer 1

您可以按如下方式使用媒体查询:

.text-center-xs {
    text-align: center;
}    
.text-left-xs {
    text-align: left;
}    
.text-right-xs {
    text-align: right;
}


/* Small devices (tablets, 768px and up) */    
@media (min-width: 768px) {
    .text-center-sm {
        text-align: center;
    }
    .text-left-sm {
        text-align: left;
    }
    .text-right-sm {
        text-align: right;
    }
}


/* Medium devices (desktops, 992px and up) */    
@media (min-width: 992px) {
    .text-center-md {
        text-align: center;
    }
    .text-left-md {
        text-align: left;
    }
    .text-right-md {
        text-align: right;
    }
}


/* Large devices (large desktops, 1200px and up) */    
@media (min-width: 1200px) {
    .text-center-lg {
        text-align: center;
    }
    .text-left-lg {
        text-align: left;
    }
    .text-right-lg {
        text-align: right;
    }
}

然后:

<div class="row">
    <div class="col-sm-8 text-center-xs text-left-sm">
        Lorem ipsum
    </div>
    <div class="col-sm-4 text-center-xs text-right-sm">
        Lorem ipsum
    </div>
</div>

演示:https://jsfiddle.net/iRbouh/5qkr7c5o/ (尝试调整输出大小以查看结果!)

希望对您有所帮助。