传单侧边栏-v2显示在地图上方而不是在地图内部

Question

我一直在为我正在做的地图使用侧边栏-v2，并且我有一些方法来解决这个问题，但我不明白为什么侧边栏出现在地图上方而不是在地图内部。这是显示它的人的照片

这是我的 HTML：

<body>
    
    <div id="sidebar" class="sidebar collapsed sidebar-left leaflet-touch">
        <!-- Nav tabs -->
        <div class="sidebar-tabs">
            <ul role="tablist">
                <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
                <li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
                <li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
                <li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
            </ul>

            <ul role="tablist">
                <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
            </ul>
        </div>

        <!-- Tab panes -->
        <div class="sidebar-content">
            <div class="sidebar-pane" id="home">
                <h1 class="sidebar-header">
                    sidebar-v2
                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
                </h1>

                <p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
            </div>

            <div class="sidebar-pane" id="profile">
                <h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
            </div>

            <div class="sidebar-pane" id="messages">
                <h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
            </div>

            <div class="sidebar-pane" id="settings">
                <h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
            </div>
        </div>
    </div>

    <div class="sidebar-map" id="soy_el_mapa" ></div>
    
    <script src="js_mapa.js"></script>
</body>



</html>

侧边栏的js部分是这样的

var sidebar = L.control.sidebar({
        autopan:false,
        closeButton: true,
        container: 'sidebar',
        position: 'left'
    }).addTo(soy_el_mapa);

谢谢！

我想知道我做错了什么，并知道如何使用侧边栏解决这个问题

Answer 1

您可能忘记包含

leaflet-sidebar-v2

的 CSS

传单侧边栏-v2显示在地图上方而不是在地图内部

问题描述投票：0回答：1

1个回答

最新问题

传单侧边栏-v2显示在地图上方而不是在地图内部

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1