由于与 bootstrap 冲突，焦点未对齐的 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 冲突，我也在我的项目中使用它。如何同时使用 Boostrap 和 MDL 并消除这种冲突？

Answer 1

我确实遇到了类似的问题，可以在下面的堆栈溢出线程中找到解决方法。

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

Answer 2

MDL 网格并不总是有 12 列：

A grid has 12 columns in the desktop screen size, 8 in the tablet size, and 4 in the phone size

因此，具有此 class 的元素：

class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet mdl-cell--4-col-phone"

将占据台式机 12 列中的 4 列，平板电脑中 8 列中的 2 列和 phone 中 4 列中的 4 列。请参阅此示例 pen。

Answer 3

您对 CSS 个文件冲突的问题是正确的。

解决此问题的最简单方法是更改 "Overriding" CSS 文件中的 CSS（"Cascade" 中的最后一个）。您要更改的 Class 是 .mdl-textfield class。 class 上的 padding-bottom 设置为 20px 作为起始值。您需要将其更改为 24px 以补偿来自 Bootstrap 3.

的额外边距和填充

所以在你的 "Overriding" CSS 文件中输入：

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

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

由于与 bootstrap 冲突，焦点未对齐的 mdl 文本字段输入

mdl textfield input with focus not aligned, due to conflict with bootstrap

css

twitter-bootstrap

material-design-lite