Question

为什么在将屏幕大小调整为md，sm和xs时，页面中间的三个透明div无法正常工作。我左边有3个偏移。如何使其适应性？他们应该一个接一个地居中。但是，当我调整左边的那个时，不会占用整排...我错过了什么？

<div class="container">
  <h1 class="text-center ">ZeoroDegree</h1>
  <h4 class="text-center">Local Weather Application</h4>
  <div id="loc" class="text-center ">Miami FL US</div>
  <div id="date" class="text-center"></div>
  <div id="icon" class="text-center">ICON</div>
  <div class="desc text-center">
    <h4>Clear Sky</h4>
  </div>

  <div id="data" class="row text-center ">
    <div id="temp" class="col-lg-2 offset-3  col-xs-12 transparent text-center box ">
      Temperature: 89 F
    </div>
    <div id="hum" class="col-lg-2 col-xs-12 transparent box ">Humidity: 50%
    </div>
    <div id="wind" class="col-lg-2 col-xs-3 transparent box">Wind: 5mph
    </div>
  </div>
</div>

Answer 1

<div class="container">
  <h1 class="text-center">ZeoroDegree</h1>
  <h4 class="text-center">Local Weather Application</h4>
  <div id="loc" class="text-center">Miami FL US</div>
  <div id="date" class="text-center"></div>
  <div id="icon" class="text-center">ICON</div>
  <div class="desc text-center">
    <h4>Clear Sky</h4>
  </div>
  <div id="data" class="row text-center">
    <div id="temp" class="col-lg-4 offset-3 col-md-4 col-sm-4 col-xs-12 transparent text-center box">
      Temperature: 89 F
    </div>
    <div id="hum" class="col-lg-4 col-md-4 col-sm-4 col-xs-12 transparent box">Humidity: 50%
    </div>
    <div id="wind" class="col-lg-4 col-md-4 col-sm-4 col-xs-12 transparent box">Wind: 5mph
    </div>
  </div>
</div>

如何让我的div完全响应

1 个答案: