1 回答

TA貢獻1864條經驗 獲得超6個贊
最簡單的方法是使用 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;
}
}
添加回答
舉報