當與引導CSS框架集成時，kendo UI網格不能正常顯示

我想知道如何在與引導CSS框架集成時顯示kendo UI網格。當與引導CSS框架集成時，kendo UI網格不能正常顯示

與引導程序集成時，網格列未正確對齊。

我發現，自舉使用以下代碼

*,*:before,*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    }

這擾亂了劍術UI網格的佈局。

我需要在我的項目中使用引導CSS框架。這是強制性的。

我知道，刪除這個CSS給我的輸出。我想知道是否有其他解決方案來實現我所需的輸出。如果該解決方案存在，那麼它是什麼？下面

是我的小提琴

http://jsfiddle.net/W4KLp/

的出生日期和年齡列（行）取向紊亂，因爲我們可以在佈局中看到。

來源

2013-10-24 user2594152

我有同樣的問題，我的快速解決方案是爲父容器添加一些標準化類。例如：

<div class="container"> 
    // kendo ui grid mvvm 
    <div data-role="grid"> 
    </div> 
</div> 

<style> 
.container *, 
.container *:after, 
.container *:before 
{ 
    -webkit-box-sizing : content-box !important; 
    box-sizing : content-box !important 
} 
</style>

來源

2013-11-25 15:35:42 Adiwena

這顯然是與事實引導和劍道依賴於不同的盒子模型並在作出依靠box-sizing: border-box混雜與那些依靠box-sizing: content-box元素困難的事情。

一般而言，劍道的所有款式均基於標準content-box型號。但是，Bootstrap的所有樣式都依賴於易於使用的border-box模型。兩者之間最大的區別是如何處理填充，邊框等。在content-box他們是一個元素的寬度的一部分，他們不是border-box。

Bootstrap假設當然你想用border-box，爲什麼你不會！它有助於設置頁面上的所有內容使用border-box，包括Kendo小部件。對於它的一部分，Kendo知道Bootstrap可能會將所有設置都設置爲border-box，因此它將所有內容都設置爲content-box，用於Kendo小部件和所有子項。所以現在如果你嵌入任何與任何Kendo相關的Bootstrap，你會得到錯誤的盒子模型。一團糟。

我試過一堆不同的黑客試圖緩解這種情況，但事實是沒有好的方法來解決它。這是我發現的CSS代碼工作迄今最好的（它使用一個CSS屬性選擇，所以這是一個不走舊版本瀏覽器）：

.border-box, .border-box * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

    [class^="k-"] { 
     -webkit-box-sizing: content-box; 
     -moz-box-sizing: content-box; 
     box-sizing: content-box; 
    } 
}

然後你可能會嵌套任何元素上設置class='border-box' Kendo小部件的內部，你知道會有Bootstrap內容。

來源

2014-06-27 18:15:20 daveaglick

當與引導CSS框架集成時，kendo UI網格不能正常顯示

回答

相關問題