基于Bootstrap col与flexbox实现列及内容左对齐方案咨询

问题原因 #

你代码中列元素额外添加了Bootstrap原生container类，该类默认配置margin-left: auto、margin-right: auto实现容器居中，这是导致列内内容无法左对齐的核心原因，和文本对齐属性无关，所以修改text-align不会生效。

解决方案 #

方案1：修改HTML结构（推荐） #

移除列元素上冗余的container类，container类仅用于包裹外层网格容器，不可嵌套在列元素上：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<h1>heading</h1>
<div class="grid docutils container">
  <!-- 删掉冗余的container类 -->
  <div class="col-6-hard docutils pl-0">
    ..table..
  </div>
  <!-- 删掉冗余的container类 -->
  <div class="col-6 docutils">
    image
  </div>
</div>

额外添加pl-0Bootstrap原生类，可取消列默认的左内边距，实现表格和上方标题完全对齐。

方案2：CSS强制覆盖（适合无法修改自动生成HTML的Sphinx场景） #

如果是Sphinx自动生成的HTML无法手动修改结构，直接添加以下自定义CSS即可：

/* 覆盖列元素上container的居中属性 */
.col-6-hard.container,
.col-6.container {
  margin-left: 0 !important;
  margin-right: auto !important;
  /* 需和标题完全对齐则打开下一行注释 */
  /* padding-left: 0 !important; */
}
/* 强制网格容器左对齐 */
.grid.docutils.container {
  justify-content: flex-start !important;
}

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