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种解决方案都应该有效。

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

这样的事情：

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

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

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

2 个答案: