如何在使用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規則添加到樣式中