载入JSON的标记上的传单弹出窗口宽度

Question

我有一个传单地图，其中的标记是动态加载了 geoJSON 数据：

mapLayers.markets = L.geoJSON(geoData, {
    pointToLayer: function (feature, latlng) {
        switch (feature.properties.status) {
            case "stress":
                return L.marker(latlng, { icon: iconA });
            case "alert":
                return L.marker(latlng, { icon: iconB });
            case "crisis":
                return L.marker(latlng, { icon: iconC });
        }
    },
    onEachFeature: onEachFeature,
}).addTo(map);

我将弹出窗口绑定在 onEachFeature 函数内部：

function onEachMarketFeature(feature, layer) {    
    var tableCommon = '<table>' +
        '<thead><tr><th>Agency</th><th>Personnel</th></tr></thead>' +
        '<tbody>' +
        '<tr><td>Alfa</td><td>12</td></tr>' +
        '<tr><td>Bravo</td><td>123</td></tr>' +
        '</tbody></table>';
    var tableSingle='<table>' +
        '<thead><tr><th>Agency</th><th>Personnel</th></tr></thead>' +
        '<tbody>' +
        '<tr><td>Juliet</td><td>62</td></tr>' +
        '<tr><td>Lima</td><td>41</td></tr>' +
        '</tbody></table>';

    var container = '<div><div class="row"><div class="col-xl-6">' + tableCommon + '</div><div class="col-xl-6">' + tableSingle + '</div></div></div>';

    layer.bindPopup(feature.properties.type +
        '<br/> Market Code=' + feature.properties.code + '<br/>' + feature.properties.name + '</a><br/>' + container);
}

问题在于，使用 bootstrap4 的行列类定义的弹出窗口中的内容大于弹出窗口，并且该没有调整大小以适合该弹出窗口，结果宽度较小。

我试图在 bindPopup 函数中设置{maxWidth：“ none”}，但它甚至更糟，并且弹出窗口很小。

这就是我得到的：

这就是我想要的：