关于ElementUI中使用Layout布局排列一行row的元素溢出问题的解决方案

今天在vue中使用elementui的layout布局制作页面的时候，发现我明明只定义了一行row的col，但是有元素却溢出到了下面一行去了：

目标效果

 

---

目前效果

 

---

<el-row>
	<el-col :span="24">
		<div class="grid-content bg-purple-dark">
			<template>
				<el-select v-model="value1" multiple placeholder="病人类型" style="margin-left: -600px; width: 200px;">
					<el-option v-for="item in options" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="value2" multiple collapse-tags style="margin-left: 10px; width: 100px;" placeholder="性别">
					<el-option v-for="item in options" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
				
			</template>
			<el-input v-model="input" multiple collapse-tags style="margin-left: 10px; width: 200px;" placeholder="请输入查询条件"></el-input>
			<template>
				<el-select v-model="value" placeholder="检查仪器" style="margin-left: 10px; width: 200px;">
					<el-option v-for="item in options" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
				<div class="">
					<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择开始日期">
					</el-date-picker>
				</div>
				<div class="">
					<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择结束日期">
					</el-date-picker>
				</div>
				  <el-button>重置</el-button>
				  <el-button type="primary">查询</el-button>
				  <el-button><i class="el-icon-delete-solid"></i></el-button>
				  <el-button><i class="el-icon-download"></i></el-button>
				  <el-button type="primary"><i class="el-icon-s-unfold"></i></el-button>
				  <el-button><i class="el-icon-menu"></i></el-button>
			</template>
		</div>
	</el-col>
</el-row>

问题代码

 

---

可以看到代码第二行明明已经 span="24"沾满了一整行，怎么元素并不在一行呢？检查了一下原来是我把日期选择器分别用了两个div包裹了起来，把div去掉就好啦~

<div class="">
	<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择开始日期">
	</el-date-picker>
</div>
<div class="">
	<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择结束日期">
	</el-date-picker>
</div>

去掉前

---

<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择开始日期">
</el-date-picker>

<el-date-picker type="dates" v-model="value4" style="margin-left: 10px; width: 200px;" placeholder="选择结束日期">
</el-date-picker>

去掉后

---

 达成预期效果