Question

如何在这两列之间添加空间。

<div class="row ">
    <div class="col-md-6 shadow">
            ...
    </div>
    <div class="col-md-6  shadow ">
            ...
    </div>
</div>

Answer 1

要在不破坏其网格布局在各种响应间隔上的行为的情况下，没有简单的方法可以向自举列添加自定义边距。

您可以使用offset-*实用程序类，但这实际上会使该列偏移许多列，而不是随机像素。

使用它的一个大概例子是：

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

到目前为止， 最简单的方法 是在该列内放置一个包装器，并在其上使用边距。对于您的情况，我想您希望它们之间的空间能够很好地渲染阴影，因此只需创建一个额外的<div>并在该位置上移动.shadow：

<div class="row ">
    <div class="col-md-6">
       <div class="shadow">
          ...
       </div> 
    </div>
    <div class="col-md-6">
       <div class="shadow">
          ...
       </div>
    </div>
</div>

现在可以轻松.shadow的边距进行游戏，并且不会破坏网格布局。

Answer 2

这取决于您的愿望。您可以使用边距和填充(Box model)在HTML元素之间添加空格。在引导程序中，可以通过m-0-m-5来保留边距，而使用p-0-p-5来保留。您也可以为不同的视口指定位置和大小。查看更多detailed informations

请记住：填充是内部内容的偏移量。边距是外部偏移量，可能会破坏您的布局（col-6 + m-5大于6 col网格）

如何在BOOTSTRAP 4列之间添加空间

2 个答案: