Bootstrap 4，具有不同内容宽度的列之间的间距相等

Question

因此在我的页脚中，我使用的是<div class="col">，它创建了相同宽度的列，尽管这很棒，但是每列内的内容是不同的宽度，因此在视觉上看起来每列之间的间距是不同的宽度，如下所示：-

是否有一种方法可以根据列的内容宽度在这些列之间创建相等的间距，以使每列之间的间距看起来相同？

Answer 1

最简单的方法是将col-auto（用于包裹列）与col（用于隔开列）结合起来...

<div class="row">
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
           ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
    </div><!--/row-->

演示：https://www.codeply.com/go/s4Jk0NBC6a

Answer 2

要调整间距，请在页脚div标签内添加“ .no-gutter”类。并在css文件中添加样式。

.no-gutter [class*='col-'] {
  width: auto;
}

Answer 3

可以使用flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在Bootstrap 4中，有一些实用程序可以方便地使用它https://getbootstrap.com/docs/4.1/utilities/flex/

示例： https://www.codeply.com/go/WQtjXDd8qA