Css 响应JQGrid

我有一个使用侧菜单和JQGrid的系统。使用我的显示器，我可以获得如下图所示的菜单和网格（左侧的框是菜单的选项）：

当我调整窗口大小或降低屏幕分辨率时，JQGrid被弄乱了，我得到如下结果：

我怎样才能让JQGrid靠近菜单而不把它弄乱呢？我一直在调查，我知道让它响应是答案，但我不知道如何在这里应用它

该菜单是动态应用的，具有如下功能：

    <link href="../drop-down-menu/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/drop-down-menu/css/dropdown/dropdown.vertical.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/drop-down-menu/css/dropdown/themes/flickr.com/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />
    <ul id="nav" class="dropdown dropdown-vertical">
        <?php            
            foreach($menuhtml as $lineamenuhtml){
                echo $lineamenuhtml;
            }
        ?>
    </ul>

JQGrid使用的样式有（包括Twitter引导）：

---

在JQGrid上，Autoedit设置为true，shrinkToFit设置为false。这个想法是使用JQGrid的setGridWidth客户端方法，并在加载页面时将其设置为页面大小（例如，在document.ready事件中）。此方法的示例代码：

$( document ).ready(function() {
    var pageWidth = $(window).width();
    jQuery("#GridID").setGridWidth(pageWidth);
});

要进行实际的调整大小，将实现以下逻辑的函数绑定到窗口的调整大小事件：

• 使用其父级的clientWidth和 （如果不可用）其offsetWidth属性
• 执行完整性检查以确保宽度已更改超过x 像素（用于解决某些特定于应用程序的问题
• 最后，使用setGridWidth（）更改网格的宽度

下面是处理大小调整的示例代码：

jQuery(window).bind('resize', function() {

    // Get width of parent container
    var width = jQuery(targetContainer).attr('clientWidth');
    if (width == null || width < 1){
        // For IE, revert to offsetWidth if necessary
        width = jQuery(targetContainer).attr('offsetWidth');
    }
    width = width - 2; // Fudge factor to prevent horizontal scrollbars
    if (width > 0 &&
        // Only resize if new width exceeds a minimal threshold
        // Fixes IE issue with in-place resizing when mousing-over frame bars
        Math.abs(width - jQuery(targetGrid).width()) > 5)
    {
        jQuery(targetGrid).setGridWidth(width);
    }

}).trigger('resize');

jQuery（window.bind（'resize'，function（））{
//获取父容器的宽度
var width=jQuery（targetContainer）.attr（'clientWidth'）；
如果（宽度==null | |宽度<1）{
//对于IE，如有必要，恢复为offsetWidth
宽度=jQuery（targetContainer）.attr（'offsetWidth'）；
}
宽度=宽度-2；//防止水平滚动条的模糊因子
如果（宽度>0&&
//仅当新宽度超过最小阈值时调整大小
//修复了当鼠标移动到框架条上时IE就地调整大小的问题
abs（width-jQuery（targetGrid.width（））>5）
{
jQuery（targetGrid）.setGridWidth（width）；
}
}).trigger（'resize'）；

---

希望这有帮助

当然，您可以将resize函数绑定到应用程序中的另一个contaner

jQuery(window).bind('resize', function() {

    // Get width of parent container
    var width = jQuery(targetContainer).attr('clientWidth');
    if (width == null || width < 1){
        // For IE, revert to offsetWidth if necessary
        width = jQuery(targetContainer).attr('offsetWidth');
    }
    width = width - 2; // Fudge factor to prevent horizontal scrollbars
    if (width > 0 &&
        // Only resize if new width exceeds a minimal threshold
        // Fixes IE issue with in-place resizing when mousing-over frame bars
        Math.abs(width - jQuery(targetGrid).width()) > 5)
    {
        jQuery(targetGrid).setGridWidth(width);
    }

}).trigger('resize');