javascript - 让引导程序使用 gridstack 小部件大小来调整大小？

Question

我正在使用 gridstack 并有一个使用引导程序的小部件。

我正在尝试这样做，以便调整 gridstack 小部件的大小 作为其子级的元素会更改列数，即 col-6 col-sm-4 col-md-3 我已经包含了一次的 HTML我的小部件。

我希望通过设置 col 大小，当小部件变得更小时，引导程序会将小部件的列数调整为 2，对于中型小部件，将列数调整为 3，对于大小部件，将列数调整为 4，但是，事实并非如此。有没有办法让引导容器从父 div 中获取显示大小而不是屏幕大小？

<div class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide" gs-x="1" gs-y="4" gs-w="10" gs-h="5" gs-id="f7642ce6-0b63-45a7-8b69-dcabaa527e67">
  <div class="grid-stack-item-content" draggable="true">
    <div class="assetsWidget colorPickerHeaders" data-widgetid="f7642ce6-0b63-45a7-8b69-dcabaa527e67" data-widgettype="DocumentOverView" style="background-color: rgb(186, 186, 186);"><span class="colorPickerHeadersSecondary" id="span-f7642ce6-0b63-45a7-8b69-dcabaa527e67" style="color: #ffffff">Document Overview</span><button class="deleteButton btn btn-outline-secondary colorPickerButtons" onclick="removeFromGrid(this.parentNode,this.parentNode.parentNode.parentNode)"
        "=" " style="background-color: rgb(0, 0, 0); "><i class="fas fa-trash-alt colorPickerButtonsSecondary " style="color: #f2f2f2 " aria-hidden="true "></i></button><button id="span-f7642ce6-0b63-45a7-8b69-dcabaa527e67 " class="editButton btn btn-outline-secondary
        colorPickerButtons " data-bs-toggle="modal " data-bs-target="#titleEditModal " onclick="UpdateWidgetTitle(this) " data-widgettype="DocumentOverView " data-widgetid="f7642ce6-0b63-45a7-8b69-dcabaa527e67 " style="background-color: #000000;
        "><i class="fas fa-edit colorPickerButtonsSecondary " style="color: #f2f2f2; " aria-hidden="true "></i></button><button id="btnFilter-f7642ce6-0b63-45a7-8b69-dcabaa527e67 " data-bs-toggle="modal " data-bs-target="#filterEditModal " class="filterButton btn
        btn-outline-secondary colorPickerButtons " onclick="getFilterOptions(this) " data-widgettype="DocumentOverView " data-widgetid="f7642ce6-0b63-45a7-8b69-dcabaa527e67 " data-widgetconfig="null " style="background-color: rgb(0, 0, 0); "><i class="fas
        fa-search-plus colorPickerButtonsSecondary " style="color: #f2f2f2 " aria-hidden="true "></i></button></div><div id="GridWidgetGrid-f7642ce6-0b63-45a7-8b69-dcabaa527e67 " class="ag-theme-balham " style="height: 90%; width:100%; "><div class="container-fluid
        "><div class="row "><div class="col-6 col-sm-4 col-md-3 ">
        <div>
        <span class="project-overview-title ">
            Mechanical O&amp;M
        </span>
        <div class="project-overview " data-id="91688738-a878-457b-9ea6-012c925df4c0f7642ce6-0b63-45a7-8b69-dcabaa527e67 ">
                <div class="project-overview-chart " id="91688738-a878-457b-9ea6-012c925df4c0f7642ce6-0b63-45a7-8b69-dcabaa527e67 "><canvas width="150 " height="150 "></canvas><div class="stat-chart-polo-text "><div class="stat-chart-polo-text-process
        process-clr-stronger "><span class="value ">0%</span><span class="type ">process</span></div><div class="stat-chart-polo-text-content content-clr-stronger "><span class="value ">0%</span><span class="type ">content</span></div></div></div>
        </div>
        <a class="btn btn-info " href="http://localhost:62360/project-dashboard.htm?S=2fa9fc72-23a7-41ed-86a1-b83a3ba04790&amp;G=8d679c46-dd39-47bb-894d-0c4f27f57d1b " role="button ">
            Project Report
        </a>
        </div>
    </div><div class="col-6 col-sm-4 col-md-3 ">
        <div>
        <span class="project-overview-title ">
            Mechanical O&amp;M
        </span>
        <div class="project-overview " data-id="8267f5e3-1d30-4208-af83-b8c6b0d5afdff7642ce6-0b63-45a7-8b69-dcabaa527e67 ">
                <div class="project-overview-chart " id="8267f5e3-1d30-4208-af83-b8c6b0d5afdff7642ce6-0b63-45a7-8b69-dcabaa527e67 "><canvas width="150 " height="150 "></canvas><div class="stat-chart-polo-text "><div class="stat-chart-polo-text-process
        process-clr-stronger "><span class="value ">0%</span><span class="type ">process</span></div><div class="stat-chart-polo-text-content content-clr-stronger "><span class="value ">0%</span><span class="type ">content</span></div></div></div>
        </div>
        <a class="btn btn-info " href="http://localhost:62360/project-dashboard.htm?S=2fa9fc72-23a7-41ed-86a1-b83a3ba04790&amp;G=511ea79b-a988-48d4-9ed0-07a87f94db24 " role="button ">
            Project Report
        </a>
        </div>
    </div></div></div></div></div><div class="ui-resizable-handle ui-resizable-se " style="z-index: 100; user-select: none; "></div></div>

标签： javascripthtmlcss