javascript - 巧妙地调整使用 Bootstrap 网格类的元素的大小

Question

我正在尝试制作一个网站，该网站使用 Bootstrap 的网格系统作为指南，但不受其控制，以至于看起来与其他网站过于相似，并且我的所有元素彼此之间过于接近，或相隔太远，这往往发生在 12 列布局的最基本用法中。

现在，我知道我可以将列数更改为 16 或 24，但我的元素设置方式会很困难，而且仍然比我想要的更严格。所以我想知道，如果我有类似这样的代码:

<div class="bean-game col-md-8">
  <h2>Bean Curd Mixing Area</h2>
</div>

如果不使用 width: CSS 属性，或任何完全覆盖 Bootstrap CSS 的东西(我担心这可能会使代码以其他方式难以管理)，我能用 CSS 做些什么吗，或者甚至可能是 JavaScript 或 JS 库，如果需要的话，使 .bean-game div 调整 relative 到 Bootstrap 代码中为 设置的宽度col-md-8 类？

对于我正在处理的网站，我希望带有 col-md-8 类的 div 稍微宽一点(比如 10px 左右)，所以至于与它上面的 div 整齐地对齐，尽管它带有另一个 col-md-[foo] 类，但由于容器 div 和一些边距的一些小技巧，它只是在通常的网格系统之外，这给了我想要的间距效果......

我意识到这可能是一件很难尝试做的事情，但它确实是解决这个特定问题的最佳方式。

Answer 1

我已经研究过这个，目前对我来说最好的解决方案似乎是使用伪类(可能是 ::after 虽然我还没有充分使用它们...) 添加伪填充，从而即时绕过 Bootstrap 限制，而不必自定义我的整个 Bootstrap 设置(我更喜欢将其留在 CDN 上)，也不必弄脏形式和功能之间的关系让我的 JavaScript 执行与用户输入无关的样式操作。它仍然不是一个“完美”的解决方案，但我可能会以此为契机来介绍一些稍微更高级的样式，这有望有益于整体页面的美感。

如果这个解决方案令我满意，我会接受我自己的答案。