我最近开始使用angular2-material和angular-flex让我感到疯狂，行为不一致/混乱/混乱的文档（...）。我现在想摆脱angular-flex-layout并使用bootstrap 3.x网格系统。我读到另一个问题，即bootstrap可能会覆盖一些角度材质样式。所以我的问题是：有没有人之前做过这个（使用角度材料组件与bootstrap 3.x网格系统结合）？如果有的话，有什么重大的问题被覆盖了吗？
答案 0 :(得分：1)
去过那里，做到了。我想不出灵活布局系统比Bootstrap的网格系统更差/更好的原因，但我可以接受决定背后的个人偏好。我的经验是使用Angular 1.x及其材料设计组件，但我相信答案仍然存在。
网格/布局与组件
如果你足够小心，不要混合Bootstrap的网格设置和AMD的布局设置，那么对于定位它可以很好地工作。使用不同组件时问题就出现了：
<强> 1。同时使用Bootstrap和AMD组件
当使用包含标签，不同类型的输入，按钮，工具提示，图标等的表单时，您会发现自己处于一个巨大的CSS层次结构中，在最无法预料的地方会相互覆盖。举几个例子：BS 3.x和AMD在一些情况下处理一些浏览器兼容性和可访问性有些不同。 AMD组件的宽度和位置高度依赖于他们的父容器布局设置，如果这些设置在BS的网格系统中，它们不会100％获得（这可能是阻塞最严重的问题）。试着想象一下disabled / required / placeholder / etc.输入的设置：是的，它将成为一个巨大的定位，文本大小和任何可能的方式混乱。
<强> 2。 DOM重做法
两个系统在DOM渲染方面相当沉重，现在想象两者兼而有之。如果您正在显示更大的数据集（不是数百万但数百或数千），那么将几个（多次重叠并相互覆盖）样式和JS功能应用于同一元素将给浏览器带来巨大负担试图渲染它。这是我的经验中一个非常大的问题，因为我们必须在包含一些操作按钮的列表中显示~2k项。不应该对任何（IE10 +）浏览器造成困难，但确实如此。
第3。造型行为，互动
最后但并非最不重要的是，我发现它创造了太多无法预料的问题，这是不可靠的。在创建用户界面并尝试专注于用户体验和响应度时，我发现自己每5分钟调试一次微小的定位问题。这是一个巨大的麻烦，我不知道它是否会在不同的屏幕上的不同浏览器中看起来相同（或至少相似！）。优化用户界面至少花了我平时的3倍，最后我站在那里用一大碗CSS和JS意大利面。
<强>解决方案？ （种）
MD Bootstrap是一个伟大的工具，它指出了我的下一个项目的良好方向。 Materialize也是如此。我并不是说这些会解决你所有的问题而且他们是唯一要做的事情，但是他们指出了一个很好的方向：想一想你的UI需要最多然后明智地选择。如果您将进行大量网格定位，那么请使用BS并使用CSS库来模仿MD。如果你需要angular的MVC和JS灵活性，那么你应该选择AMD，但是要想出一个好的布局处理。
我希望我的经验分享能帮到你，或者至少指出好的方向。一些进一步的阅读帮助我几个月前的研究回来了：
Using Bootstrap for Angular and Material design for Angular together
Combining angular material with twitter bootstrap without conflicts