需求(主要根据自己需求)：

在做系统模块中，需要搜索的功能比较多，比如时间、name、导出、导入等等、搜索栏不能在同一行（根据领导需要）(记录问题，不喜勿喷)

问题描述：

不是说屏幕小很正常，但是屏幕小一点点后面那部分就想下移，体验很不舒服

解决方案：

element ui 提供了 Layout 布局：
https://element.eleme.cn/#/zh-CN/component/layout

方案一（基础布局）

<template><div class="search-main"><el-row><el-col :span="4" class="input-div"><el-date-pickerclass="input-picker"v-model="objSearch.searchDate"type="daterange"unlink-panelsvalue-format="yyyy-MM-dd"range-separator="到"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-col><el-col :span="4" class="input-div"><!-- 报告类型搜索 --><el-selectclass="input-div-item"v-model="objSearch.searchReportType"filterableplaceholder="请选择"><el-optionv-for="item in objSearch.searchReportTypeOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-inputclass="input-div-item"v-model="objSearch.searchImei"placeholder="请输入搜索值"></el-input></el-col><el-col :span="4" class="input-div"><!-- 普通搜索 --><el-selectclass="input-div-item"v-model="objSearch.searchType"filterableplaceholder="请选择"><el-optionv-for="item in objSearch.searchKeyOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-inputclass="input-div-item"v-model="objSearch.searchValue"placeholder="请输入搜索值"></el-input></el-col><el-col :span="6" class="input-btn"><el-button @click="search" type="primary" icon="el-icon-search">搜索</el-button><el-button @click="refresh" type="primary" icon="el-icon-refresh">刷新</el-button><el-button type="primary" icon="el-icon-document" @click="exportExcel">导出EXCEL</el-button></el-col><el-col :span="6" class="total"><el-button type="primary" icon="el-icon-files">{{ objSearch.name }}报告总数:{{ objSearch.total }}份</el-button><el-button type="primary" icon="el-icon-files">{{ objSearch.name }}消耗总数:{{ objSearch.number }}次</el-button></el-col></el-row></div>
</template>

解释：基础布局比响应式布局相对麻烦点，而且当屏幕缩小时，会覆盖其他的搜索栏和按钮

方案二（响应式布局）

<template><div class="search-main"><el-row><el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"><el-date-pickerv-model="objSearch.searchDate"type="daterange"unlink-panelsvalue-format="yyyy-MM-dd"range-separator="到"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker><!-- 报告类型搜索 --><el-selectclass="com com-margin"v-model="objSearch.searchReportType"filterableplaceholder="请选择"><el-optionv-for="item in objSearch.searchReportTypeOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-inputclass="com"v-model="objSearch.searchImei"placeholder="请输入搜索值"></el-input><!-- 普通搜索 --><el-selectclass="com com-margin"v-model="objSearch.searchType"filterableplaceholder="请选择"><el-optionv-for="item in objSearch.searchKeyOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-inputclass="com"v-model="objSearch.searchValue"placeholder="请输入搜索值"></el-input><el-button @click="search" type="primary" icon="el-icon-search">搜索</el-button><el-button @click="refresh" type="primary" icon="el-icon-refresh">刷新</el-button><el-button type="primary" icon="el-icon-document" @click="exportExcel">导出EXCEL</el-button><div class="total"><el-button type="primary" icon="el-icon-files" size="small">{{ objSearch.name }}报告总数:{{ objSearch.total}}份</el-button><el-button type="primary" icon="el-icon-files" size="small">{{ objSearch.name }}消耗总数:{{ objSearch.number}}次</el-button></div></el-col></el-row></div>
</template>

解释：响应式是不需要我们设置固定格子的，给它最大范围就行。

<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">

效果

总结

除了上面的两种方案，还有很多，官网也给出了很多案例，若还是不能解决你的问题，可以去看看其他大佬的文章，相信会找到你想要的方案。

element ui搜索栏响应式布局相关推荐

flex布局和响应式布局
flex伸缩布局一.是什么 Flexible Box 简称 flex,意为"弹性布局",可以简便.完整.响应式地实现各种页面布局,采用Flex布局的元素,称为flex容器cont ...
响应式布局，你需要知道的一切
来源:campcc https://juejin.cn/post/6951575591099301895 2011年,Google 发布了 Android 4.0,在经历了 Cupcake,Donut ...
响应式布局，你需要知道这些
来源:campcc https://juejin.cn/post/6951575591099301895 2011年,Google 发布了 Android 4.0,在经历了 Cupcake,Donut ...
必须去收藏14个响应式布局的前端开发框架
必须去收藏14个响应式布局的前端开发框架前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式 ...
vw 前端_一行css代码轻松实现前端响应式布局（vw+rem）
大家知道rem可以用来做响应式布局,只是html元素上的font-size样式需要根据屏幕宽度来指定. 之前有用@media媒体查询,根据各种屏幕宽度写html的样式,也用过类似lib-flexibl ...
web前端响应式布局,自适应全部分辨率
写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...
SAP UI5 应用开发教程之三十三 - SAP UI5 应用的响应式布局特性(Responsiveness)试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
流体式布局与响应式布局_将固定像素设计转换为流体比例布局
流体式布局与响应式布局 Responsive web design has been a prime necessity for every enterprise ever since Google ...
javafx响应式布局_JavaFX的响应式设计
javafx响应式布局使用CSS技术,为您的网站创建响应式设计相对容易. 根据屏幕的大小,您可以使用其他CSS文件和布局. 在JavaFX中,乍一看似乎有些困难,因为CSS仅负责样式,而不负责布局. ...

element ui搜索栏响应式布局