由于与引导程序冲突，mdl文本字段输入焦点未对齐

Question

我试图在AngularJS项目中使用MDL。

要安装MDL，我已按照此处的bower说明操作： https://getmdl.io/started/index.html

然后我就在使用此代码之后： https://getmdl.io/components/#textfields-section

<!-- Simple Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="sample1">
    <label class="mdl-textfield__label" for="sample1">Text...</label>
  </div>
</form>

我已经在chrome和firefox中进行了测试，当我关注元素时，我得到了这个：

我没有任何线索为什么焦点与输入边框底部不一致（因为它应该是）。关于原因以及如何解决的任何想法？

修改 问题是由于与Bootstrap的冲突，我也在我的项目中使用了Bootstrap。如何使用Boostrap和MDL并消除这种冲突？

Answer 1

我确实遇到了类似的问题，可以在下面的堆栈溢出线程中找到它的修复。

Material Design Lite - Bottom Line in text field has a slight gap with colored line

Answer 2

对于存在冲突的CSS文件的问题，你是对的。

解决此问题的最简单方法是更改​​“Overriding”CSS文件中的CSS（“Cascade”中的最后一个）。您要更改的类是 .mdl-textfield课程。此类的填充底部设置为20px作为起始值。您需要将其更改为24px以补偿Bootstrap 3中的额外边距和填充。

所以在你的“覆盖”CSS文件中输入：

.mdl-textfield{padding-bottom: 24px;}

这应解决问题，并允许Material Design Lite和Bootstrap 3的CSS / JS与输入字段一致地工作。