如何扩展Streamlit的st.expander并消除Folium地图左右留白？

问题原因 #

• 你给st_folium设置了固定宽度675，但st.expander的宽度是自适应页面容器的，固定宽度导致地图无法填满expander的可用空间，从而出现左右留白。
• Folium地图本身设置的width='100%'被st_folium的固定width参数覆盖，没有起到自适应作用。

解决方案 #

把st_folium的width参数改为'100%'，让地图自适应expander的宽度，同时可按需设置height参数控制地图高度，避免布局变形。

修改后的代码 #

# Create Folium map
m = folium.Map(
    location=[-7.417745006891739, 109.22726059533683],
    zoom_start=13, 
    width='100%',  # 保持地图本身的宽度自适应
    height=500     # 设置固定高度，避免地图拉伸过高
)
folium.Marker(
    [-7.417745006891739, 109.22726059533683],
    popup=popup_manis, 
    icon=folium.Icon(
        color='red',
        icon='location',
        prefix='fa-solid fa-shop'
    ),
    tooltip=str('Pasar Manis')
).add_to(m)

with st.expander("Find market on maps", expanded=True):
    st.subheader('Map')
    # 将width改为100%自适应expander宽度，同步设置匹配的height
    st_folium(m, width='100%', height=500)

额外优化建议 #

• 如果需要限制地图最大宽度，可以用st.columns或st.container包裹地图，设置容器的最大宽度，避免大屏上地图过度拉伸。
• 保持folium.Map的height和st_folium的height一致，确保地图显示比例协调。

内容的提问来源于stack exchange，提问作者Fajar Kamaludin