Bootstrap主题内容宽度小于父容器 排版对齐异常问题求助

• 栅格结构不符合Bootstrap规范：row 元素的直接子元素只能是 col 类元素，当前代码中最外层 row 内直接嵌套了 row、nav 等元素，没有用 col 包裹，导致 row 默认的左右负边距、container 的默认内边距没有被正确抵消，出现多余空白。
• Logo区域布局错误：Logo所在列设置了 col-lg-1，大屏下该列宽度仅为容器的1/12，远小于你设置的300px图片宽度，导致内容溢出，同时多余的嵌套 row 会额外增加间距。
• 元素默认间距未清除：Bootstrap的navbar、col默认带有左右内边距，没有手动清除的情况下会导致内容无法贴合容器边缘。
• 底部行设置了列间距：底部内容所在的row加了gx-2类，默认会给列增加左右内边距，导致两侧出现空白。

1. 修正整体栅格结构 #

给最外层row加一个全宽的col-12作为内容容器，同时清除默认内边距：

<div class="container-lg">
  <div class="row">
    <div class="col-12 p-0">
      <!-- 原有所有内容都放到这个col内 -->
    </div>
  </div>
</div>

2. 修正Logo区域布局 #

去掉多余的嵌套row和不合理的col-lg-1，如果需要Logo左对齐贴合边缘，直接调整为：

<!-- 替换原有logo的嵌套row代码 -->
<div class="ps-0">
  <img src="img/xGhost.svg" alt="xGhost logo" style="width: 300px; height: auto;"/>
</div>

如果需要用栅格控制，可替换为col-auto类适配图片宽度。

3. 清除导航栏默认内边距 #

给nav元素添加px-0类，清除Bootstrap导航栏默认的左右内边距：

<nav class="navbar navbar-expand-md navbar-dark bg-dark mt-2 px-0">
  <!-- 原有导航内容 -->
</nav>

4. 调整底部内容行间距 #

如果需要两个盒子贴合左右边缘、同时保留中间间距，给第一个col加ps-0、第二个col加pe-0：

<div class="row gx-2 mt-3">
  <div class="col-md-8 ps-0">
    <div class="box">
      <div class="box-heading">Novinky & Blog</div>
    </div>
  </div>
  <div class="col-md-4 pe-0">
    <div class="box">
      <div class="box-heading">Přihlášení</div>
    </div>
  </div>
</div>

如果不需要中间间距，直接把gx-2改为gx-0即可。

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