如何在使用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编译器覆盖。

接下来，我引用了this，创建了一个css文件custom-overrides.css

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

并像<stylesheet src="/custom-overrides.css" />一样导入到我的gwt.xml中，但也不起作用，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个解决方案都应该有效。

您可以确保通过向覆盖的css样式添加!important (即，要覆盖UiBinder文件中的.modal类的width : 960px !important;)

• If )，您必须使用@external注释：

如下所示：

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

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