我刚开始将twitter's bootstrap 移植到GWT（参见github 项目here 和一个非常丑陋的演示here），但是，我遇到了引导样式与Gwt 样式的问题。
Bootstrap 在 tr/td 元素中放置了一个border-top，GWT 组件基本上到处都使用表格。在demo 中，您可以在左侧的 VerticalPanel 中看到该错误。
所以，我一直在寻找一种让 GWT 组件忽略引导样式的方法，但我不知道该怎么做。
有没有简单的方法让它正常工作？
提前致谢。
【问题讨论】：
标签： css gwt twitter-bootstrap
在 GWT 中使用链接器做某事是可能的，但有点复杂。高层次的想法是：
第一部分很简单，只需在根元素中添加一个 id。
第二部分也很简单，只需将如下所示的代码添加到您的 Module.gwt.xml 文件中：
<define-linker name="cssLinker" class="com.you.bootstrap.linker.CssRenamingLinker" />
<add-linker name="cssLinker"/>
困难的部分是实现链接器。可以手动解析它，但您可能会发现使用 SAC 之类的东西更容易。
使用链接器，您可以通过在每个选择器前插入 #gwt 来转换您的 CSS。使用 SAC，您可以通过覆盖所有 DocumentHandler 方法来简单地将它们的每个参数发送到 OutputStream 来做到这一点。在 DocumentHandler.startSelector() 中，您将首先在每个选择器之前发出“#gwt”。
[编辑] 这假定 GWT 的 standard.css 定义了覆盖引导样式的样式。如果没有，您可能必须使用默认值“增强”GWT CSS。有一个 W3C 推荐默认值列表here。
这样做的好处是它可以抵御未来 - 如果 GWT 样式发生变化或引导程序样式发生变化，这应该是健壮的。
希望对你有帮助，
亚当
【讨论】：
您可以简单地将样式添加到您的根 GWT 对象之一，然后简单地覆盖引导样式以移除那些混乱的边框：
<div class="gwt">
... some other GWT-content
</div>
在你的 CSS 中：
.gwt tr, .gwt td {
border-top: 0px;
}
当然，如果您需要在您的 GWT 元素中嵌入一些引导元素，那么您将不得不修改并执行以下操作：
<div class="gwt">
... some other GWT-content
<div class="bootstrap">...
... Bootstrap elements
</div>
</div>
在你的 CSS 中：
.bootstrap tr, .bootstrap td {
border-top: 1px; // Whatever bootstrap style puts
}
【讨论】：