box sizing
el-transfer组件⾃定义左右列表宽度el-transfer组件⾃定义左右列表宽度
我们知道element-ui 是⾃带样式的,但是有时候我们需要覆盖掉它们⾃带的样式,⽐如⾃定义el-transfer列表宽度
1⾸先打开后台信息,看看⾃⼰想要修改的样式的类
2 在style标签中修改相关的样式,注意不要加上scope
3 在element-ui 标签上加上相应的选择器,防⽌样式污染全局,同时加⼤优先级
举个例⼦:
实现el-transfer组件⾃定义左右列表宽度
打开控制台发现两列的宽度是在el-transfer-panel 这个类中定义的
所以,我们要覆盖它的样式:
<style>
.transfer-class .el-transfer-panel{
border: 1px solid #ebeef5;
border-radius: 4px;
overflow: hidden;
background: #fff;
display: inline-block;
vertical-align: middle;
width: 250px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
</style>
其中transfer-class是我们⾃⼰添加的样式

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。