亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

調整屏幕大小時將一行更改為不同的兩行

調整屏幕大小時將一行更改為不同的兩行

慕仙森 2022-12-29 16:31:53
我有一行包含兩個輸入列:    <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>我想在將屏幕調整到移動設備時將這一行分成兩行,而不是在移動設備上呈現時。它應該看起來像這樣:我怎樣才能做到這一點?
查看完整描述

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;

    }

}


查看完整回答
反對 回復 2022-12-29
  • 1 回答
  • 0 關注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號