调整屏幕大小时将一行更改为不同的两行

Question

我有一行包含两个输入列：

    <div class="row first-row">

      <div class="column col-6">

        <div class="form-group">

          <label for="usr"

            >Sequence Number:</label

          >

          <input type="text" class="form-control sequence-number" id="usr" />

        </div>

      </div>

      <div class="column status col-6">

        <BaseDropdown

          label="Status:"

          :options="statusTypes"

          v-model="building"

          placeholder="Please select a status"

        />

      </div>

    </div>

我想在将屏幕调整到移动设备时将这一行分成两行，而不是在移动设备上呈现时。它应该看起来像这样：

我怎样才能做到这一点？

Answer 1

最简单的方法是使用 Flex。您可以通过重新组织 html 以将两个字段包含在列 div 中来实现此目的，如下所示：<div class="row first-row">&nbsp; &nbsp; <div class="column col-6">&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="usr">Sequence Number:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control sequence-number" id="usr" />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="column status col-6">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BaseDropdown label="Status:" :options="statusTypes" v-model="building"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Please select a status" />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>然后将 flex 应用到列 div，使用媒体查询在您选择的断点处更改 flex-direction：.column.col-6 {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;}@media screen and (min-width: 768px) {&nbsp; &nbsp; .column.col-6 {&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; }}