1

我正在为我的项目使用 GWTBootstrap 模态，问题是它的宽度对我来说太窄了。

我检查了它与萤火虫的样式并看到了这个

.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;
}

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

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

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

那也行不通。我很困惑，我应该怎么做才能应用我的样式？

4

2 回答 2

2

这是一个 twitter 引导问题：模式没有响应。

这应该在 Bootstrap 3.0 中修复。

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

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

于 2013-05-14T13:20:36.697 回答
1

所有 3 种解决方案都应该有效。

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

像这样的东西：

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

但是您可能还必须将!important规则添加到样式中

于 2013-04-18T13:48:10.600 回答