如何在使用GWT-Bootstrap的GWT项目中应用自定义样式

Question

我正在为我的项目使用GWTBootstrap模式，问题是它的宽度太窄，不符合我的喜好。

我检查了它与firebug得到的样式，并看到了这一点

.modal {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
left: 50%;
margin: -250px 0 0 -280px;
outline: medium none;
position: fixed;
top: 50%;
width: 560px;
z-index: 1050;
}

我转到Webapp / css目录并对bootstrap.min.css进行了以下更改

.modal {
width : 960px;
max-height : 960px;
}

但它会被gwt编译器覆盖。

接下来我提到了这个创建了一个css文件custom-overrides.css

.modal {
    width : 960px;
    max-height : 960px;
}

并且像我的gwt.xml <stylesheet src="/custom-overrides.css" />那样导入它。这也不起作用，eclipse警告我文件在编译时被更改或删除。

我也尝试在创建模态的UIBinder文件中进行相同的更改。

<ui:style>
    .modal{
        width : 960px;
    max-height : 960px;
    }
</ui:style>

这也行不通。 我很困惑，我该怎样做才能让我的风格得到应用？

Answer 1

这是一个Twitter引导问题：模态没有响应。

这应该在Bootstrap 3.0中修复。

关于解决方案，正如@mit所说，它会起作用，但我必须警告你：除非你确切知道你在做什么，否则这不是一个好习惯。

我建议你为你的模态添加一个ID，并为它编写特定的CSS。 这将驱逐其他模态的混乱。 由于ID更具体，您也不需要使用!important 。

Answer 2

所有3种解决方案都可行

1. 您可以覆盖bootstrap.min.css但是您必须在gwt-bootstrap库本身中执行此操作，因为您发现它在编译应用程序时会被覆盖。
2. 您还可以包含custom-override.css stylesheet但必须确保它还覆盖原始引导程序文件中的.modal样式。 你可以通过添加!important来覆盖css样式（i..e width : 960px !important; ）
3. 如果要覆盖UiBinder文件中的.modal类，则必须使用@external批注：

像这样的东西：

<ui:style>
    @external .modal;
    .modal{
        width : 960px;
        max-height : 960px;
    }
</ui:style>

但您可能还需要将!important规则添加到样式中