传单标记显示css框架和使用窗格的问题

Question

我正在使用传单和Bulma css的组合来创建一个网页。像许多其他框架一样，Bulma似乎重置了一些与Leaflet有关的类。主要是

max-width: 100% 

img类内部。根据这个github问题，传单应该会解决这个问题：https://github.com/Leaflet/Leaflet/issues/5775然而，即使在当前版本中，我也遇到了它。我在这里制作了一把小提琴：https://jsfiddle.net/FiddleHeimer3000/n9k53mcy/17/以说明问题。

这里创建了三个标记：

var markyMcMarkface_a = new L.marker(new L.LatLng( 1752,2136 ),{
title:"Hello Kitty A",
pane:"left"
}).addTo(map);
var markyMcMarkface_b = new L.marker(new L.LatLng( 1752,3300 ),{
title:"Hello Kitty B",
pane:"right"
}).addTo(map)
var markyMcMarkface_c = new L.marker(new L.LatLng( 1352,3300 ),{
title:"Hello Kitty C",
}).addTo(map)

现在，在bulma.css存在的情况下，只有最后一个未附加到窗格的标记才会被渲染。一旦省略了最大宽度为100%的bulma.css，一切都很好。我不明白的是传单上的问题：

.leaflet-container .leaflet-overlay-pane svg, 
.leaflet-container .leaflet-marker-pane img, 
.leaflet-container .leaflet-shadow-pane img, 
.leaflet-container .leaflet-tile-pane img, 
.leaflet-container img.leaflet-image-layer { 
max-width: none !important; 
} 

似乎根本不起作用。已在所有当前浏览器中尝试。有什么CSS精灵可以发光吗？

谢谢！

Answer 1

我为您创建了一个工作版本：https://jsfiddle.net/falkedesign/4ycv5eum/

您必须将标记添加到sideBySide层阵列：

L.control.sideBySide([left_layer,markyMcMarkface_a],[right_layer,markyMcMarkface_b]).addTo(map);

并添加此css：

.leaflet-pane.leaflet-left-pane, .leaflet-pane.leaflet-right-pane{
z-index: 599;
}