在页面上添加单个Bootsfaces元素会扭曲网页

Question

我在primefaces 5.3项目中试用了bootsfaces 1.0.1（https://www.bootsfaces.net）。

它运作良好，但问题是如果我在页面中添加一个单独的元素，页面会变形（挤压）

查看没有bootsfaces元素的原始屏幕。

然后，使用<b:inputText placeholder="Type something here..." value=""/>

添加一个文本框后页面的外观如下

我如何解决这个问题？

更新

我已经确定这不是一个靴面问题。只需添加bootstrap css就会发生这种情况。即使页面上没有任何引导元素，引导程序2和3也都可以。

Answer 1

2016年12月27日更新： 我已经写了an article并创建了project on GitHub以解决问题。第一批结果令人鼓舞。基本上，你只需要包含CSS文件resetBSToPF.css添加插入CSS样式类＆＃34; pf＆＃34;一些PrimeFaces组件，以便在同一个项目中使用BootsFaces和PrimeFaces。文件中定义的大多数CSS规则都是递归工作的，所以这不应该是一个很大的问题。

目前，CSS文件仅仅是一个涵盖一些重要用例的草图，但我认为还有很多工作要做。让我们共同努力吧！我确信这很快就解决了不兼容问题。

我的回答： 人们经常报告说，将PrimeFaces和BootsFaces（或一般的Bootstrap）结合起来很困难。但是，我认为有一些PrimeFaces组件比其他组件更有问题。数据表似乎是其中之一。您可以尝试通过BootsFaces数据表替换PrimeFaces数据表。 PrimeFaces数据表功能更强大，但在大多数情况下，您不需要高级功能。你仍然需要覆盖一些CSS，但希望这并不太难。

顺便说一句，this Portuguese article解释了为什么Bootstrap和PrimeFaces不兼容，虽然它没有解释如何解决这个问题。