Bootstrap标签页内网格布局异常问题求助

看起来你的问题主要来自两个方面：未闭合的HTML标签导致DOM结构错乱，以及隐藏标签页中图表初始化时的宽度计算错误。下面是具体的修复步骤：

1. 修正未闭合的标题标签 #

在你的Second标签页代码中，有两处标题标签没有正确闭合，这会破坏DOM结构，进而导致Bootstrap网格无法正常渲染：

原代码：

<div class="col-12"><h4>Total texts<h4></div>
<div class="col-12"><h5>Texts spread by subject (monthly slice)<h5></div>

修改为（把<h4>/<h5>闭合标签改为</h4>/</h5>）：

<div class="col-12"><h4>Total texts</h4></div>
<div class="col-12"><h5>Texts spread by subject (monthly slice)</h5></div>

2. 解决隐藏标签页中图表的宽度问题 #

由于Second标签页初始是隐藏状态（带有fade类），Chartkick生成的图表在初始化时无法获取容器的正确宽度，导致显示时被压缩。我们可以通过监听Bootstrap标签页的切换事件，在标签页激活时重新调整图表尺寸：

在你的现有JavaScript代码后添加这段代码：

<%= javascript_tag do %>
// 监听标签页切换完成事件
$('#nav-tab a').on('shown.bs.tab', function (e) {
  // 检查是否切换到Second标签页
  if ($(e.target).attr('href') === '#nav-second') {
    // 重新渲染所有Chartkick图表，强制计算正确尺寸
    Chartkick.eachChart(function(chart) {
      chart.resize();
    });
  }
});
<% end %>

3. 确保Bootstrap 4的JS依赖完整 #

Bootstrap 4需要jQuery和Popper.js才能正常工作（包括标签页功能），请确认你已引入这些依赖。在你的<head>部分添加以下脚本：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

完成以上三步后，你的Second标签页内的网格布局和图表应该就能正常显示了。

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