引导布局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中自定义您自己的适合移动设备的主题可以为您带来最好的效果。

希望这会有所帮助！