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

【问题标题】：mdl textfield input with focus not aligned, due to conflict with bootstrap由于与引导程序冲突，焦点未对齐的 mdl 文本字段输入
【发布时间】：2018-01-18 02:47:15
【问题描述】：

我正在尝试在 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 并消除这种冲突？

【问题讨论】：

您的文本区域中的字体看起来不像 MDL 字体。您是否 1) 在您的网站中有任何其他 JS/CSS 文件或 2) 在您的控制台中有任何错误说无法加载其中一个 MDL 文件或 3) <form> 是否封装在其他一些元素中会改变字体大小/重量/系列？
好建议乔纳森，我会检查
按照您的提示，我发现这是由于引导。我在我的部分代码中使用引导程序，特别是对于网格系统。当我删除引导程序时，MDL 问题得到了修复。但是，我需要引导程序...如何同时使用引导程序和 MDL，而不会出现这种冲突（以及可能的其他冲突...）？
嗯...这两者不兼容并不让我感到惊讶。我可能会为 Bootstrap 寻找一些材料设计主题来实现这一点。快速谷歌搜索发现了这个，但可能有更好的fezvrasta.github.io/bootstrap-material-design/…
不要过早放弃 MDL。你可以使用MDL的grid

标签： css twitter-bootstrap material-design-lite

【解决方案1】：

您认为 CSS 文件冲突的问题是正确的。

解决此问题的最简单方法是更改“覆盖”CSS 文件（“级联”中的最后一个）中的 CSS。您要更改的类是 .mdl-textfield 班级。此类的 padding-bottom 设置为 20px 作为起始值。您需要将其更改为 24px 以补偿来自 Bootstrap 3 的额外边距和填充。

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

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

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

【讨论】：

【解决方案2】：

MDL 网格并不总是有 12 列：

一个网格有 12 个桌面屏幕大小的列，8 个平板电脑大小的列，4 个手机大小的列

所以，这个类的元素：

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

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

【讨论】：

感谢科斯塔斯。我喜欢 MDL 处理响应性的方式。它比 Bootstrap 更简单、更直观。

【解决方案3】：

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

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

【讨论】：