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

问题描述

我有两列:

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

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

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

如果我想要在两者之间有一个 100px 空间，我怎么能用 Bootstrap 自动实现这一点:div 的大小将变成 450px 每个以补偿间距.

解决方案

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

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

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

I have two columns:

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

How can I add a space between them?

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.

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.

解决方案

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>

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

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