Question

我正在尝试使用以下内容修正ID为div（其中包含#acc3个更多内容）的div的位置：

HTML

<div class="col-md-9">
<div class="accordion" id="acc3">
    <div class="accordion-group" id="acc3g">
        <div class="accordion-heading" id="acc3h">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#acc3" href="#div3">
                Inventory Graph</a>
        </div>
        <div id="div3" class="accordion-body collapse in">
            <div class="accordion-inner" id="acc3i">
                <div id="inventoryLevels"></div>
            </div>
        </div>
    </div>
</div>

的 CSS

.fixed {
        position:fixed;
       }

JS

    $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('#acc3').addClass('fixed');
    } else {
        $('#acc3').removeClass('fixed');
    }
});

问题是div无法保持其宽度，滚动时该宽度应等于col-md-9。我在互联网上搜索了很多关于这个问题的内容，似乎黑客是在页面加载时计算#acc3的宽度并将其强加给它及其子项。当您调整窗口大小时，此处会出现另一个问题：为此，我尝试收听resize()模块，其代码如下所示：

JS

var chartWidth = $('#acc3').width();
$('#acc3').css('width', chartWidth + 'px');
$('#acc3g').css('width', (chartWidth-2) + 'px');
$('#acc3h').css('width', 'inherit');
$('#div3').css('width', 'inherit');
$('#acc3i').css('width', 'inherit');
$('#inventoryLevels').css('width', (chartWidth-32) + 'px');

var windowWidth = $(window).width();
var windowToChartWidthRatio = windowWidth/chartWidth;

$( window ).resize(function() {
    var newWindowWidth = $(window).width();
    var newChartWidth = newWindowWidth/windowToChartWidthRatio;
    $('#acc3').css('width', newChartWidth  + 'px');
    $('#acc3g').css('width', (newChartWidth-2) + 'px');
    $('#acc3h').css('width', 'inherit');
    $('#div3').css('width', 'inherit');
    $('#acc3i').css('width', 'inherit');
    $('#inventoryLevels').css('width', (newChartWidth-32) + 'px');
});

这仍然可以正常工作（虽然我觉得它非常hacky）。现在，当我使用HighCharts制作图形时，其各种元素的宽度也需要更改。像这样，我陷入了更深层次的问题。任何人都可以告诉我如何在没有任何这种情况的情况下简单地修复嵌套的div #acc3吗？或者，如果我采取正确的方式，我该如何解决这个问题？

如何在使用bootstrap时修复div的位置

0 个答案: