巧妙地調整使用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庫是否需要相對於col-md-8類的Bootstrap代碼中設置的寬度來調整.bean-game div的大小？

對於我正在工作的網站，我希望帶有col-md-8類的div的寬度要小一些（例如10px左右），以便與上面的div整齊地對齊，盡管帶有另一個col-md-[foo]類，但由於容器div和邊緣有一些小col-md-[foo]這只是在普通網格系統之外，這給了我所需要的間隔效果...

我意識到這可能是一件很難的事情，但確實感覺這是解決此特定問題的最佳方法。

Answer 1

我已經對此進行了研究，目前看來，對我來說最好的解決方案是使用偽類（可能是::after雖然我還沒有充分研究它們之后……）來添加偽填充和因此，可以即時解決Bootstrap的限制，而不必自定義我的整個Bootstrap設置（我寧願保留在CDN上），也不必通過讓JavaScript執行與用戶輸入無關的樣式操作來弄臟表單和函數之間的關系。 。 它仍然不是一個“完美”的解決方案，但是我可以以此為契機，介紹一些稍微高級的樣式，這將有益於整個頁面的美觀。

如果該解決方案令我滿意，我將接受自己的回答。