响应式内联div引导程序

Question

我正试图使div中的文本位于xs大小的中心。它适用于大型桌面，但不适用于移动设备以下是我的代码：

<div class="row">
<div style="background-color:lightblue;color:#33CAFF"
class="col-lg-2 col-md-2 col-xs-3">STEP 1
</div>
<div style="background-color:#33CAFF;color:white"
class="col-lg-4 col-md-4 col-xs-5">2.SELECT VEHICLES & EXTRAS
</div>
<div style="background-color:white;color:gray"
class="col-lg-2 col-md-2 col-xs-2">STEP 3
</div>
<div style="background-color:white;color:gray"
class="col-lg-2 col-md-2 col-xs-2">STEP 4
</div>
</div>

Answer 1

Bootstrap可能不支持该的class do

你可以添加一个自定义类，然后像这样写一点css。

HTML

<div class="row">
<div style="background-color:lightblue;color:#33CAFF"
class="col-lg-2 col-md-2 col-xs-3 xs-text-center">STEP 1
</div>
<div style="background-color:#33CAFF;color:white"
class="col-lg-4 col-md-4 col-xs-5 xs-text-center">2.SELECT VEHICLES & EXTRAS
</div>
<div style="background-color:white;color:gray"
class="col-lg-2 col-md-2 col-xs-2 xs-text-center">STEP 3
</div>
<div style="background-color:white;color:gray"
class="col-lg-2 col-md-2 col-xs-2 xs-text-center">STEP 4
</div>
</div>

CSS

@media (max-width: 768px) {
.xs-text-center {
text-align: center;
}
}