我也面临着同样的问题;下面的方法对我很有效。

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

这将自动在两个div之间渲染一些空间。

我需要在移动设备上有一列，在平板电脑肖像上有两列，中间有相等的间距(也没有在列内添加任何网格填充)。可以通过使用空格实用程序和在col-md中省略数字来实现:

    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
            <div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
        </div>
    </div>

引导4，文件自定义。SCSS您可以添加以下代码:

$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base, 
sm: $grid-gutter-width-base, 
md: $grid-gutter-width-base, 
lg: $grid-gutter-width-base, 
xl: $grid-gutter-width-base
);

默认$grid-gutter-width-base: 30px;

根据Bootstrap 4文档，你应该给父元素一个负边距mx-n*，给子元素一个正边距px-*

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="row mx-n5"> <div class="col px-5"> <div class="p-3 border bg-light">自定义列填充</div> < / div > <div class="col px-5"> <div class="p-3 border bg-light">自定义列填充</div> < / div > < / div >

为了获得列之间特定宽度的间距，我们必须在标准Bootstrap的布局中设置填充。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); /* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */ @media (min-width: 992px) { .space-100-px > .row > .col-md-6:first-child { padding: 0 50px 0 0; /* The first half of 100px */ } .space-100-px > .row > .col-md-6:last-child { padding: 0 0 0 50px; /* The second half of 100px */ } } /* The result will be easier to see. */ .space-100-px img { width: 100%; height: auto; } <div class="container-fluid space-100-px"> <div class="row"> <div class="col-md-6"> <img src="http://placehold.it/450x100?text=Left" alt="Left"> </div> <div class="col-md-6"> <img src="http://placehold.it/450x100?text=Right" alt="Right"> </div> </div> </div>

您可以使用此处文档中的col-md-offset-*类来实现列之间的间距。间距是一致的，这样所有的列都能正确对齐。为了获得均匀的间距和列大小，我将执行以下操作:

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

在Bootstrap 4中使用:offset-2或offset-md-2