Bootstrap 4：如何在列前创建DIV以控制列的显示与隐藏

嘿，我来帮你搞定这个需求！你想要用Bootstrap 4实现点击按钮切换不同.menu-page容器里的列显示/隐藏，对吧？下面是完整的实现方案，直接就能用：

1. 完整HTML结构 #

先按照你的需求搭建容器结构，加上控制按钮，每个.menu-page默认隐藏，只显示第一个：

<div class="container my-4">
  <!-- 控制按钮组 -->
  <div class="mb-3">
    <button class="btn btn-primary page-btn active" data-target="1">页面1</button>
    <button class="btn btn-secondary page-btn" data-target="2">页面2</button>
    <button class="btn btn-secondary page-btn" data-target="3">页面3</button>
  </div>

  <!-- 内容行 -->
  <div class="row">
    <!-- 第一个页面 -->
    <div class="menu-page" data-page="1">
      <div class="col-lg-6" style="background-color: red; height: 200px;">页面1-列1</div>
      <div class="col-lg-6" style="background-color: yellow; height: 200px;">页面1-列2</div>
    </div>

    <!-- 第二个页面 -->
    <div class="menu-page" data-page="2">
      <div class="col-lg-6" style="background-color: blue; height: 200px;">页面2-列1</div>
      <div class="col-lg-6" style="background-color: green; height: 200px;">页面2-列2</div>
    </div>

    <!-- 第三个页面 -->
    <div class="menu-page" data-page="3">
      <div class="col-lg-6" style="background-color: purple; height: 200px;">页面3-列1</div>
      <div class="col-lg-6" style="background-color: orange; height: 200px;">页面3-列2</div>
    </div>
  </div>
</div>

2. 基础CSS样式 #

用自定义样式控制.menu-page的显示/隐藏，同时适配Bootstrap的flex布局：

/* 默认隐藏所有menu-page，除了第一个 */
.menu-page {
  display: none;
  width: 100%; /* 确保占满父级row的宽度 */
}
.menu-page[data-page="1"] {
  display: flex; /* 和Bootstrap row的flex布局保持一致，保证列正常排列 */
}

/* 按钮激活状态优化（可选，提升交互体验） */
.page-btn.active {
  background-color: #007bff;
  border-color: #007bff;
}

3. JavaScript交互逻辑 #

用原生JS实现按钮点击切换，不依赖额外库（如果你的项目用了jQuery，后面也附简化版本）：

// 获取所有控制按钮和页面容器
const pageButtons = document.querySelectorAll('.page-btn');
const menuPages = document.querySelectorAll('.menu-page');

// 给每个按钮绑定点击事件
pageButtons.forEach(button => {
  button.addEventListener('click', () => {
    const targetPage = button.getAttribute('data-target');
    
    // 隐藏所有页面容器
    menuPages.forEach(page => {
      page.style.display = 'none';
    });
    
    // 显示目标页面容器
    document.querySelector(`.menu-page[data-page="${targetPage}"]`).style.display = 'flex';
    
    // 更新按钮样式，标记当前激活的按钮
    pageButtons.forEach(btn => {
      btn.classList.remove('active', 'btn-primary');
      btn.classList.add('btn-secondary');
    });
    button.classList.add('active', 'btn-primary');
    button.classList.remove('btn-secondary');
  });
});

可选：jQuery简化版本 #

如果你的项目已经引入了jQuery，可以用更简洁的代码实现：

$('.page-btn').click(function() {
  const targetPage = $(this).data('target');
  // 切换页面显示
  $('.menu-page').hide();
  $(`.menu-page[data-page="${targetPage}"]`).show();
  // 切换按钮状态
  $('.page-btn').removeClass('active btn-primary').addClass('btn-secondary');
  $(this).addClass('active btn-primary').removeClass('btn-secondary');
});

关键细节说明 #

• 用display: flex而不是block：因为Bootstrap 4的.row是flex容器，.menu-page作为子元素用flex布局，能保证内部的.col-lg-6按照Bootstrap的栅格规则正常排列，不会出现宽度错乱或换行问题。
• 用data-*属性关联按钮和页面：这种方式扩展性极强，后续新增页面只需要添加对应的按钮和.menu-page容器，不需要修改JS逻辑。

这样整个功能就完美实现了，点击不同按钮就能切换显示对应的列容器，完全符合你的需求~

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