html - 响应式页面对齐建议

Question

我的网页设计需要一些帮助，我正在尝试将其作为响应式设计。该图像显示了我目前的设计，并且在更改为不同设备时一切正常。但我想把键盘放在仪表下方，仪表和键盘与天气应用程序平行。但它卡在底部，我不知道如何让它向上移动

这是去掉网页代码的行布局脚本。

<div class="row">
	<div class="col-2">
      Gauge1
	</div>
	<div class="col-2">
      Gauge2
	</div>
	<div class="col-2">
      Gauge3
	</div>
	<div class="col-6">
     weather App
	</div>
</div>
<div class="row">
	<div class="col-4">
      KEY Pad
	</div>
	<div class="col-8">
      nothing yet
	</div>
</div>

Answer 1

由于天气应用的高度，它被向下推了。天气应用程序必须在某处具有硬编码宽度，这使得它比您指定的 col-6 更“瘦”。我建议做类似的事情:

将主要部分分成两半，然后在左半部分放置一排仪表，在其下方放置一排键盘。在右半边放置您的天气应用。

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-4">
        Gauge1
      </div>
      <div class="col-4">
        Gauge2
      </div>
      <div class="col-4">
        Gauge3
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        KEY Pad
      </div>
    </div>
  </div>
  <div class="col-6">
    weather App
  </div>
</div>