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

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;

    }

}