Material Design Lite - テキストフィールドのボトムラインに色付きの線がわずかに隙間があります

Question

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> 

Answer 1

私はブートストラップで使用した場合MDLと同じ問題に直面していたし、ブートストラップCSSファイルを判明のマージンを追加します5pxのギャップを作成するLabel elmentの場合は、5pxからその下に移動します。 Bootstrap.cssから

JSFiddle-Recreating the issue

コードスニペットは0PXするラベル要素のマージン下を減らすだろう

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

修正を提出します。

Fix- JsFiddle

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

この情報がお役に立てば幸いです。