javascript - 调整屏幕大小时将一行更改为两个不同的行
问题描述
我有一排有两个输入列:
<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>
我想在将屏幕大小调整为移动设备时将此行分成两行,而不是在移动设备上渲染时。它应该看起来像这样:
我怎样才能做到这一点?
解决方案
最简单的方法是使用 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;
}
}
推荐阅读
- ruby-on-rails - 在 Ruby on Rails 中覆盖模型的“全部”方法
- python - Python处理中是否有任何random.choices()函数
- javascript - 从 ajax json 响应获取数据时出错
- intellij-idea - PhpStorm 认为在它之外创建的文件包含错误
- javascript - 抓取和验证 Web 文档中的 JavaScript 代码
- c - 重定位被截断,R_X86_64_PC32 针对未定义符号
- rust - 为什么 Rust 程序不从 if 语句返回值?
- laravel - 模态中的 Laravel 删除表单按钮超出表单元素并且不删除项目
- django - 您如何检查名字和姓氏是否仅在创建时唯一?
- php - 为什么只有在页面重新加载时才会出现 SQL 错误?