开发YouTube克隆时Bootstrap Toggle与Collapse属性使用异常

问题根源 #

你当前的布局里，红色折叠栏、蓝色栏、绿色栏作为独立列放在同一行中，Bootstrap的collapse仅控制元素显示/隐藏，不会自动调整其他列的宽度分配。红色栏显示时会占据col-3的空间，导致蓝色col-1+红色col-3+绿色自动计算为col-8，完全不符合你要的“覆盖蓝色区域”的效果。

解决方案 #

要实现预期效果，需调整结构，让红色栏展开时替换蓝色栏的显示，并动态调整绿色栏的宽度：

1. 用Toggle按钮同时控制红色栏的显示/隐藏和蓝色栏的隐藏/显示
2. 借助Bootstrap的collapse事件，在折叠状态变化时切换绿色栏的col-11和col-9类
3. 清理重复的Bootstrap CSS引用，避免样式冲突

修改后的完整代码 #

.col {
  padding: 1rem;
  color: white;
  border: 2px solid black;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>

<body>
  <nav class="navbar bg-light border-bottom d-flex">
    <div class="container-fluid d-flex">
      <div style="width: 20%;">
        <button class="btn btn-light me-2" type="button" data-bs-toggle="collapse" data-bs-target="#toggleSections, #blueSection" aria-expanded="false" aria-controls="toggleSections blueSection">
          <i class="bi bi-list fs-4"></i> 
        </button>
        <label><i class="bi bi-youtube fs-2" style="color: red;"></i></label>
        <span class="fs-5 fw-bold">YouTube</span>
      </div>
      <div class="d-flex" style="width: 65%">
        <form class="d-flex" style="width: 100%;">
          <label class="d-flex border rounded-circle" style="width: 70%;">
            <input class="form-control border-0" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-light border-0"><i class="bi bi-search"></i></button>
          </label>
          <button class="btn btn-light me-3 border-0 rounded-circle">
            <i class="bi bi-mic fs-5"></i> 
          </button>
        </form>
      </div>
      <div style="width: 15%;">
        <button class="btn btn-light border rounded-pill">
          <i class="bi bi-plus"> Create</i>
        </button>
        <button class="btn btn-light border-0 rounded-circle">
          <i class="bi bi-bell fs-5"></i> 
        </button>
        <button class="btn btn-light border-0 rounded-circle">
          <i class="bi bi-google"></i>
        </button>
      </div>
    </div>
  </nav>

  <div class="container-fluid border" style="background-color: lightblue;">
    <div class="row border" style="background-color: yellowgreen; height: 100px;">
      <!-- 红色折叠栏：初始隐藏 -->
      <div class="col-3 collapse" style="background-color: red; margin: 4px;" id="toggleSections"></div>
      <!-- 蓝色栏：初始显示，点击Toggle后隐藏 -->
      <div class="col-1 d-flex align-items-center justify-content-center" style="background-color: blue; margin: 4px;" id="blueSection"> column1</div>
      <!-- 绿色内容栏：动态切换宽度 -->
      <div class="col-11 d-flex align-items-center justify-content-center" style="background-color:green; margin: 4px;" id="contentSection"> column3</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // 监听collapse事件，动态切换绿色栏的宽度类
    const collapseElement = document.getElementById('toggleSections');
    const contentSection = document.getElementById('contentSection');
    
    collapseElement.addEventListener('show.bs.collapse', function () {
      contentSection.classList.remove('col-11');
      contentSection.classList.add('col-9');
    });
    
    collapseElement.addEventListener('hide.bs.collapse', function () {
      contentSection.classList.remove('col-9');
      contentSection.classList.add('col-11');
    });
  </script>
</body>

关键调整说明 #

• Toggle按钮的data-bs-target同时指向红色栏和蓝色栏，实现点击时红色显示、蓝色隐藏，反之亦然
• 通过Bootstrap的show.bs.collapse和hide.bs.collapse事件，动态修改绿色栏的列宽度类，确保布局匹配预期
• 移除了body末尾重复的Bootstrap CSS引用，避免潜在样式冲突

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