文本字段中的“材料设计”Lite -底线与彩色线条之间有轻微的差距。

Question

我试图让材料设计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

当我和引导程序一起使用MDL时，我确实遇到了同样的问题，结果是引导css文件为标签单元添加了5 5px的空白，这就造成了5px的空白。

JSFiddle-重新创建这个问题

来自Bootstrap.css文件的代码片段

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

Fix将label元素的页边距底部减少到0px。

Fix- JsFiddle

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

希望这能有所帮助。