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

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">
    <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 class="column status col-6">
            <BaseDropdown label="Status:" :options="statusTypes" v-model="building"
                placeholder="Please select a status" />
        </div>
    </div>
</div>

然后将 flex 应用到列 div，使用媒体查询在您选择的断点处更改 flex-direction：

.column.col-6 {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 768px) {
    .column.col-6 {
        display: flex;
        flex-direction: row;
    }
}

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

Change a row into two different rows when resizing the screen

html

javascript

css

mobile

responsive-design