如何在Bootstrap中增加列之间的间距? [英] How do I add spacing between columns in Bootstrap?

问题描述

我确定有解决此问题的简单方法.基本上，如果我有两列，如何在它们之间添加空格?

I'm sure there is a simple solution to this problem. Basically, if I have two columns how can I add a space between them?

例如如果html是:

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

输出将只是彼此相邻的两列，占据页面的整个宽度.假设宽度设置为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空格，我怎么能做到这一点?显然，通过引导程序自动将div大小变为450px来补偿空间

If I wanted a 100px space between the two how could I achieve this? Obviously automatically through bootstrap the div sizes would become 450px each to compensate for the space

推荐答案

您可以使用 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

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