javascript – Material Design Lite – 文本字段中的底线与彩色线条略有差距
作者:互联网
我试图让Material Design Lite文本字段工作,我有一个问题,底部彩色线在灰色起始线之间有一个3-4微米的间隙.任何MDL文本字段示例我插入我的页面我得到相同的结果,什么可以在本地触发问题?我也在前端使用react.js.
我在1.2.1材料设计精简版.
这是我的代码:
<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input className="mdl-textfield__input" type="text"/>
<label className="mdl-textfield__label" htmlFor="nameField">
Your name
</label>
</div>
解决方法:
当与boostrap一起使用时,我确实遇到了与MDL相同的问题,结果表明,对于标签元素,boostrap css文件为其底部添加了5px的边距,从而产生了5px的间隙.
Bootstrap.css文件中的代码片段
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
修复将标签元素的margin-bottom减少到0px.
.mdl-textfield__label{
margin-bottom:0px;
}
希望这可以帮助.
标签:javascript,material-ui,material-design-lite 来源: https://codeday.me/bug/20190623/1267579.html