响应页面对齐建议

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>