Bootstrap页面div被侧边栏遮挡无法正常排布问题求助

解决方案 #

问题根因为外层包裹容器未启用弹性布局，侧边栏未固定宽度导致右侧内容区被遮挡，按以下步骤修改即可：

第一步：替换页面中#div-innpakning对应的代码段

<div id="div-innpakning" class="d-flex w-100" style="height: calc(100vh - 56px);">
  <div class="border-info border-3 border-top side-navbar active-nav d-flex justify-content-between flex-wrap flex-column navbar-dark bg-dark" id="sidebar" style="width: 250px;flex-shrink: 0;">
    <ul class="nav flex-column text-white w-100">
      <a href="#" class="nav-link h3 align-self-center text-white my-2">
          Lager
      </a>
      <li class="nav-link h6 text-white my-2"><i class="fas fa-coins fa-fw"></i> Penger: </li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li class="nav-link h6 text-white my-2"><i class="fas fa-car fa-fw"></i> Biler </li>
      <li class="nav-link h6 text-white my-2"><i class="fas fa-box-open fa-fw"></i> Ting </li>
      <li class="nav-link h6 text-white my-2"><i class="fas fa-pills fa-fw"></i> Narkotika </li>
    </ul>
  </div>
  <div class="border border-3 d-flex flex-grow-1 justify-content-center align-items-center m-3" id="info">
    <p>h</p>
  </div>
</div>

注：代码同时修复了你原代码中li非法嵌套的语法错误，不影响原有功能

可选：将内联样式抽离到自定义CSS文件（更易维护）

打开你的../../../assets/css/style.css，添加以下代码：

/* 外层容器适配顶部导航高度，占满剩余视口高度 */
#div-innpakning {
  display: flex;
  width: 100%;
  height: calc(100vh - 56px);
}
/* 侧边栏固定宽度，禁止被挤压 */
#sidebar {
  width: 250px;
  flex-shrink: 0;
}
/* 右侧内容区占满剩余宽度，内容居中 */
#info {
  flex-grow: 1;
  margin: 1rem;
  justify-content: center;
  align-items: center;
}

如果你的侧边栏宽度不是250px，直接修改对应数值即可，右侧内容区会自动适配剩余宽度。

内容的提问来源于stack exchange，提问作者Fredrik Elias Freding