如何增加列之间的间距? [英] How to add spacing between columns?

问题描述

我有两列:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

如何在它们之间添加空格?

How can I add a space between them?

输出将只是彼此相邻的两列，占据页面的整个宽度.假设宽度设置为 1000px ，则每个div的宽度为 500px .

The output would simply be two columns right next to each other taking up the whole width of the page. Say the width was set to 1000px then each div would be 500px wide.

如果我想在两者之间留出 100px 的间距，怎么用Bootstrap自动实现: div s的大小将分别变为 450px 来补偿间距.

If I wanted a 100px space between the two how could I achieve this automatically with Bootstrap: the divs sizes would become 450px each to compensate for the spacing.

推荐答案

您可以使用 col-md-offset-* 类，在此处记录.间距是一致的，因此所有列均正确排列.为了获得均匀的间距和列大小，我将执行以下操作:

You can achieve spacing between columns using the col-md-offset-* classes, documented here. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:

<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

In Bootstrap 4 use: offset-2 or offset-md-2

这篇关于如何增加列之间的间距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！