Bootstrap 4移动端实现按钮下方居中放置id为plaatsen的div

嘿，我来帮你搞定这个移动端导航栏的布局需求！针对你说的「移动端视图中让id为plaatsen的div位于菜单按钮下方，且两者宽度均为100%」的要求，我们可以通过CSS媒体查询来精准调整移动端的样式：

具体实现代码 #

/* 保留你原有的桌面端样式，仅添加移动端适配规则 */
@media (max-width: 768px) {
  /* 替换为你实际的菜单按钮选择器，比如类名或id */
  .menu-toggle-btn {
    width: 100%; /* 让菜单按钮占满屏幕宽度 */
    display: block; /* 强制块级显示，独占一行 */
  }

  #plaatsen {
    width: 100%; /* 让plaatsen div同样占满屏幕宽度 */
    display: block; /* 自动换行到菜单按钮下方 */
    margin-top: 10px; /* 可选：增加间距优化视觉体验 */
    /* 重置可能干扰布局的属性 */
    float: none;
    flex: none;
  }
}

额外优化建议 #

如果你的导航栏原本采用Flex布局，移动端可以直接调整父容器的布局方向，让元素自动上下排列：

@media (max-width: 768px) {
  .navbar-parent-container {
    flex-direction: column;
    align-items: stretch; /* 子元素自动拉伸至100%宽度 */
  }

  .menu-toggle-btn, #plaatsen {
    width: 100%; /* 显式设置避免继承问题 */
  }
}

注意事项：

• 把代码中的.menu-toggle-btn替换成你项目中实际的菜单按钮选择器（类名或id）
• 可以根据你的设计需求调整max-width的数值，匹配你想要切换到移动端布局的屏幕阈值

这样调整后，在移动端视图下，菜单按钮和#plaatsen div就会自动上下排列，且都占满屏幕宽度啦～

内容的提问来源于stack exchange，提问作者Jilco Tigchelaar