材料设计精简版-文本字段中的底线与彩色线之间存在细微间隙

Question

我正在尝试使Material Design Lite文本字段正常工作，但有一个问题，即底部彩色线在灰色起始线之间存在3-4 px的细微间隙。我插入页面的任何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>

Answer 1

当与boostrap一起使用时，我确实遇到了与MDL相同的问题，结果是boostrap css文件为Label elment的底部添加了5px的边距，从而创建了5px的间隙。

JSFiddle-重现问题

Bootstrap.css文件中的代码片段

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}

解决方法是将label元素的页边距减少到0px。

修复-JsFiddle

.mdl-textfield__label{  
   margin-bottom:0px;
 }

希望这可以帮助。