引導佈局JQuery調整大小

Question

我正在使用bootstrap3作爲響應式佈局。我也使用JQuery UI來調整div的大小。

我的代碼片段看起來像這個div（類=「COL-SM-4的用戶界面小部件內容」）

當我調整我需要將其調整到引導12山坳格子圖案的股利。因此，例如，如果我水平調整div的大小，我需要該類作爲col-sm-5。

有沒有一種方法來對齊網格/將類分配給引導列？

Thnak你

Answer 1

對於您將需要建立在你想要的列寬被覆蓋的斷點一個CSS的解決方案。因此，如果您想要在平板電腦縱向視圖（例如）上使用col-sm-5寬度（例如，class =「col-sm-4 ui-widget-content」），則需要覆蓋寬度通過將col-sm-4的引導寬度替換爲col-sm-5的寬度來進行媒體查詢。

例子：

@media (min-width: 768px) and (max-width: 979px) { 
.col-sm-4 .ui-widget-content {width: 41.66666667% !important;} 
} 

就個人而言，我不知道你爲什麼會想這樣做。按照原樣利用引導框架並簡單地通過將其寬度重新定義爲（width：auto）或（width：100％），以確保它們正確填充引導列來調整jQuery UI元素會更有益處。這將確保您的模板的響應完整性。此外，利用jQuery UI主題和圖像將無法提供您尋找的視覺清晰度，因爲它們與移動Retina顯示屏或（@ 2x）不兼容。 jQuery UI有一些很酷的功能和小部件，但我發現在bootstrap中自定義您自己的適合移動設備的主題可以爲您帶來最好的效果。

希望這會有所幫助！