Material Design Lite - нижняя линия в текстовом поле имеет небольшой зазор с цветной линией

Question

Я пытаюсь получить текстовое поле Material Design Lite для работы, и у меня есть проблема, когда нижняя цветная линия имеет небольшой разрыв в 3-4 пикселя между серая стартовая линия. Любой текст MDL. Пример поля. Я подключаюсь к своей странице. Я получаю тот же результат, что может быть вызвано локально. Также я использую response.js в интерфейсе.

Я на 1.2.1 материального дизайна lite.

Вот изображение:

Вот мой код:

<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 при использовании boostrap и получается, файл boostrap CSS добавляет запас 5px до нижней части для метки метки, которая создает разрыв в 5 пикселей.

JSFiddle-Recreating the issue

Фрагмент кода из файла Bootstrap.css

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

Fix бы уменьшить краю дна элемента этикетки для 0px.

Fix- JsFiddle

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

Надеется, что это помогает.