Question

我正在尝试在xs size中心的div中创建我的文本。它适用于大尺寸桌面，但不适用于移动设备以下是我的代码：

    <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可能不支持此类的操作

你可以添加一个自定义类并写一点像这样的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;
  }
}

响应内联div bootstrap

1 个答案: