Bootstrap 5 装订线与边距

Question

也许是一个愚蠢的问题，但我仍然没有正确理解它。我看到了 bootstrap v5 文档，v4 有很多变化，其中之一就是排水沟。

谁能解释一下使用gutters 与margin 实用程序有什么区别？，建议何时使用边距以及何时使用边距？

感谢您的帮助！

Answer 1

Gutters 只适用于 Bootstrap 网格，而 margins 可以在任何地方使用。

Gutters 专门调整 Bootstrap 网格 row 和 col 上的边距和填充，这会影响行内列之间的间距。

另一方面，margins 可以用于任何元素。

排水沟更有效地改变网格间距。仍然可以使用边距/填充来实现相同的效果，但需要对每一列进行更改。例如，以下行看起来相同，但在第一行使用 gutter 标记较少...

    <!-- no gutters to 0 -->
    <div class="row gx-0">
        <div class="col">
          
        </div>
        <div class="col">
         
        </div>
        <div class="col">
         
        </div>
        <div class="col">
           
        </div>
    </div>
    <!-- no gutters using margins and padding -->
    <div class="row m-0">
        <div class="col px-0">
           
        </div>
        <div class="col px-0">
           
        </div>
        <div class="col px-0">
          
        </div>
        <div class="col px-0">
          
        </div>
    </div>

Demo