javascript - Bootstrap 布局 JQuery 调整大小

Question

我正在使用 bootstrap3 进行响应式布局。我还使用 JQuery UI 来调整 div 的大小。

我的代码片段看起来像这个 div (class="col-sm-4 ui-widget-content")

当我调整 div 大小时，我需要将其调整为 bootstrap 12 列网格模式。因此，例如，如果我水平调整 div 的大小，我需要类作为 col-sm-5。

有没有办法对齐网格/将类分配给引导列？

谢谢你

Answer 1

对于 CSS 解决方案，您需要在希望覆盖列宽的位置建立断点。因此，如果你说你想要 (class="col-sm-4 ui-widget-content") 在平板电脑纵向 View 上使用 col-sm-5 宽度(例如)，你需要覆盖你的宽度通过将 col-sm-4 的 Bootstrap 宽度替换为 col-sm-5 的宽度来进行媒体查询。

例子:

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

就我个人而言，我不确定您为什么要这样做。按原样利用 bootstrap 框架并通过在需要时将其宽度重新定义为 (width: auto) 或 (width: 100%) 来简单地微调 jQuery UI 元素以确保它们正确填充 bootstrap cols 会更加有益。这将确保模板的响应完整性。此外，利用 jQuery UI 主题和图像无法提供您想要的视觉清晰度，因为它们与移动 Retina 显示器不兼容或 (@2x)。 jQuery UI 有一些很酷的功能和小部件，但我发现在 bootstrap 中自定义您自己的适合移动设备的主题将使您两者兼得。

希望这对您有所帮助!