需求(主要根据自己需求)：
在做系统模块中，需要搜索的功能比较多，比如时间、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-picker
class="input-picker"
v-model="objSearch.searchDate"
type="daterange"
unlink-panels
value-format="yyyy-MM-dd"
range-separator="到"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-col>
<el-col :span="4" class="input-div">
<!-- 报告类型搜索 -->
<el-select
class="input-div-item"
v-model="objSearch.searchReportType"
filterable
placeholder="请选择"
>
<el-option
v-for="item in objSearch.searchReportTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-input
class="input-div-item"
v-model="objSearch.searchImei"
placeholder="请输入搜索值"
></el-input>
</el-col>
<el-col :span="4" class="input-div">
<!-- 普通搜索 -->
<el-select
class="input-div-item"
v-model="objSearch.searchType"
filterable
placeholder="请选择"
>
<el-option
v-for="item in objSearch.searchKeyOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-input
class="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-picker
v-model="objSearch.searchDate"
type="daterange"
unlink-panels
value-format="yyyy-MM-dd"
range-separator="到"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<!-- 报告类型搜索 -->
<el-select
class="com com-margin"
v-model="objSearch.searchReportType"
filterable
placeholder="请选择"
>
<el-option
v-for="item in objSearch.searchReportTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-input
class="com"
v-model="objSearch.searchImei"
placeholder="请输入搜索值"
></el-input>
<!-- 普通搜索 -->
<el-select
class="com com-margin"
v-model="objSearch.searchType"
filterable
placeholder="请选择"
>
<el-option
v-for="item in objSearch.searchKeyOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-input
class="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">
效果
总结
除了上面的两种方案，还有很多，官网也给出了很多案例，若还是不能解决你的问题，可以去看看其他大佬的文章，相信会找到你想要的方案。