Bootstrap Grid布局不符合预期：主内容与侧边栏无法同行显示

看了你的代码和布局需求，侧边栏总是堆叠在主内容下方，大概率是这几个常见问题导致的，咱们一步步排查解决：

1. 先确认Bootstrap CSS是否正确引入 #

你只贴了JS的引入代码，但Bootstrap Grid系统的核心是CSS文件，必须在页面<head>标签里先引入Bootstrap的CSS，否则网格布局完全不会生效：

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

这是最基础的前提，很多人会漏掉这一步导致布局失效。

2. 移除col类里多余的空格 #

你的主内容容器写了<div class="col-lg-8 ">，class值后面多了个空格——虽然浏览器通常会忽略，但这种小细节可能导致渲染异常，改成<div class="col-lg-8">更稳妥。

3. 处理fixed导航栏的遮挡问题 #

你的导航栏用了fixed-top类，这个类会让导航栏脱离文档流，下面的container会默认顶到页面顶部被导航栏覆盖。虽然这不会直接导致列堆叠，但如果内容区域被挤压变形，可能间接影响布局。给container加上mt-5（或者自定义合适的margin-top），确保内容不被导航栏挡住：

<div class="container mt-5">

4. 检查内容里的元素是否溢出容器 #

看你内容块里的图片用了img-fluid是对的，但如果有其他元素（比如超长无换行的文本、未设置max-width的自定义元素）超出了col-lg-8的宽度，就会把侧边栏挤到下方。可以临时给主内容区域加个overflow-hidden排查：

<div class="col-lg-8 overflow-hidden">

如果这样侧边栏回到了同行，就去检查内容里哪个元素溢出了，比如长字符串可以加text-wrap类强制换行。

5. 排查自定义CSS的冲突 #

有时候自己写的CSS会覆盖Bootstrap的默认样式，比如给row或col设置了float: left、display: block之类的属性，破坏了Grid的flex布局逻辑。可以临时注释掉所有自定义CSS，看看布局是否恢复正常，再逐步找出冲突的样式。

修正后的完整body.html示例 #

<!-- Navigation --> {% include 'nav.html' %} 
<!-- Page Content --> 
<div class="container mt-5">
  <div class="row">
    <div class="col-lg-8">
      {% block content %} {% endblock %}
    </div>
    <div class="col-lg-4">
      {% block sidewidget %} {% endblock %}
    </div>
  </div>
</div>
<!-- Bootstrap core JavaScript --> 
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/tinymce/tinymce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tinymce/custom.js' %}"></script>

按照上面的步骤排查，应该就能解决侧边栏堆叠的问题，实现你想要的左右布局了。

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