如何使用Bootstrap 5设计侧边栏实现左中右三栏布局

Bootstrap 栅格系统默认将一行宽度划分为12等份，只要按比例给内容区分配col类，就能实现你要的分栏布局，以下是基于你现有代码修改后的完整可运行版本：

<!-- 保留你原有的顶部导航栏代码 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
    <a class="navbar-brand" href="{% url 'register' %}"><h2>Borinati</h2></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item"><a class="nav-link active" href="{% url 'login' %}">Login</a></li>
            <li class="nav-item"><a class="nav-link active" aria-current="page" href="{% url 'register' %}">Sign Up</a></li>
            <li class="nav-item"><a class="nav-link active" href="{% url 'FeedBack' %}">About</a></li>                      
        </ul>
    </div>
</div>
</nav>

<!-- 导航栏下方的三栏布局主体 -->
<div class="container mt-4">
  <div class="row">
    <!-- 左侧边栏区域 大屏占3/12宽度 -->
    <div class="col-lg-3">
      <div class="list-group">
        <a href="" class="list-group-item list-group-item-action">Home</a>
        <a href="" class="list-group-item list-group-item-action">Contact Us</a>
        <a href="" class="list-group-item list-group-item-action">Companies</a>
        <a href="" class="list-group-item list-group-item-action">Products</a>
        <a href="" class="list-group-item list-group-item-action">Our Partner</a>
        <a href="" class="list-group-item list-group-item-action">Our Sponsor</a>
      </div>
    </div>

    <!-- 中间主内容区域 大屏占6/12宽度 -->
    <div class="col-lg-6">
      <div class="row justify-content-center">
        <form action="" method="GET" class="w-100">
          <input placeholder="Search By Category" type="text" class="form-control" name="q">
        </form>
      </div>
      <br>
    
      <div class="row">
        {% for question in news reversed %}
        <div class="col-md-6">
            <div class="card my-3">
                <div class="card-body">
                    <a href="{% url 'view-News' question.slug %}" style="text-decoration: none;">
                    {{question.title}}
                    </a><br>
                    <br>
                    <a href="{% url 'Public_Profile' question.user.profile.slug %}">
                        {{question.user.username}}
                    </a>
                    <br>
                    <p class="btn btn-primary disabled btn-sm">{{question.category}}</p>                            
                </div>
            </div>
        </div>
        {%endfor%}
      </div>
    </div>

    <!-- 右侧预留区域 大屏占3/12宽度 后续可放热门推荐、广告等内容 -->
    <div class="col-lg-3">
      <!-- 这里可以自行添加右侧栏内容 -->
    </div>
  </div>
</div>

布局说明 #

• 宽度分配按3:6:3划分，三个分栏宽度加和刚好为12，符合Bootstrap栅格规则
• 所有分栏添加col-lg-*前缀，在屏幕宽度小于992px（平板、手机尺寸）时，三栏会自动从上到下堆叠，保证移动端浏览体验
• 左侧导航用了Bootstrap自带的list-group组件替换裸链接，样式和整体框架统一，自带hover交互效果
• 移除了你原有中间内容里多余的嵌套container，避免栅格嵌套导致的边距错位
• 修正了你原有模板代码的变量错误：循环定义的临时变量是question，原来内部调用误用了news，修改后新闻内容可以正常渲染
• 如果不需要右侧栏，只需要把左侧栏改成col-lg-3、中间栏改成col-lg-9即可，总宽度保持12就不会错位

内容的提问来源于stack exchange，提问作者Adamu Abdulkarim Dee