Html 如何在 Bootstrap 中添加列之间的间距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18738712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add spacing between columns in Bootstrap?
提问by Muhammed Bhikha
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?
我相信这个问题有一个简单的解决方案。基本上，如果我有两列，如何在它们之间添加空格？
e.g. if the html is:
例如，如果 html 是：
<div class="col-md-6"></div>
<div class="col-md-6"></div>
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 1000pxthen each div would be 500pxwide.
输出将只是彼此相邻的两列，占据页面的整个宽度。假设宽度设置为1000px那么每个 div 都会很500px宽。
If I wanted a 100pxspace between the two how could I achieve this? Obviously automatically through bootstrap the div sizes would become 450pxeach to compensate for the space
如果我想要100px两者之间的空间，我怎么能做到这一点？显然，通过引导程序自动将 div 大小变为450px每个以补偿空间
采纳答案by Ben
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:
您可以使用col-md-offset-*此处记录的类来实现列之间的间距。间距是一致的，以便您的所有列都正确排列。为了获得均匀的间距和列大小，我会执行以下操作：
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
回答by Utpal - Ur Best Pal
I was facing the same issue; and the following worked well for me. Hope this helps someone landing here:
我面临同样的问题；以下对我来说效果很好。希望这有助于有人登陆这里：
<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>
This will automatically render some space between the 2 divs.
这将自动渲染 2 个 div 之间的一些空间。
回答by Robin Jonsson
I know I'm late to the party, but you could try spacing the boxes with padding.
我知道我参加聚会迟到了，但是您可以尝试用填充物将盒子隔开。
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
CSS:
CSS：
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
Have a go at it
试一试
回答by Ali El Habchi
you can use background-clip and box-model with border proprety
您可以使用带有边框属性的背景剪辑和框模型
.box{
box-model: border-box;
border: 3px solid transparent;
background-clip:padding-box;
}
<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>
回答by Joe Fitzgibbons
I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.
我在列之间的空间方面遇到了类似的问题。根本问题是引导程序 3 和 4 中的列使用填充而不是边距。因此，两个相邻列的背景颜色相互接触。
I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.
我找到了一个适合我们的问题的解决方案，并且很可能适用于大多数试图分隔列并保持与网格系统其余部分相同的间距宽度的人。
This was the end result we were going for
这是我们想要的最终结果
Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.
列之间有阴影的间隙是有问题的。我们不希望列之间有额外的空间。我们只是希望排水沟是“透明的”，这样网站的背景颜色就会出现在两个白色列之间。
this is the markup for the two columns
这是两列的标记
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column
这种方法确实需要一个具有负边距的内部 div，就像“行”类引导程序使用的那样。而这个 div，我们称之为“raised-block”，必须是一列的直接兄弟
This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.
通过这种方式，您仍然可以在列内获得适当的填充。我见过似乎通过创建空间来工作的解决方案，但不幸的是，他们创建的列在行的两侧都有额外的填充，因此最终使行变得更薄，而网格布局是为此而设计的。如果您查看图像以获得所需的外观，这意味着两列加在一起将小于顶部较大的一列，这会破坏网格的自然结构。
The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.
这种方法的主要缺点是它需要额外的标记来包装每一列的内容。对我们来说这是有效的，因为只有特定的列需要它们之间的空间才能实现所需的外观。
回答by Amit
This will allow a space between the two columns and obviously if you want to change the default width you can go for mixins to modify the default bootstrap width. Or, you can give the width using the inline CSS style.
这将允许两列之间有一个空间，显然如果你想改变默认宽度，你可以使用 mixin 来修改默认引导宽度。或者，您可以使用内联 CSS 样式指定宽度。
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
回答by User_3535
You can achieve spacing between columns using the col-xs-* classes,within in a col-xs-* div coded below. 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:
您可以使用 col-xs-* 类实现列之间的间距，在下面编码的 col-xs-* div 中。间距是一致的，以便您的所有列都正确排列。为了获得均匀的间距和列大小，我会执行以下操作：
<div class="container">
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
</div>
回答by S..
Use bootstrap's .form-groupclass. Like this in your case:
使用引导程序的.form-group类。在你的情况下是这样的：
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
回答by Farac
Inside the col-md-?, create another div and put picture in that div, than you can easily add padding like so.
在 col-md-? 中，创建另一个 div 并将图片放在该 div 中，这样您就可以轻松地添加填充。
<div class="row">
<div class="col-md-8">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
</div>
<style>
thumbnail{
padding:4px;
}
</style>
回答by Ivan Djordevic
Bootstrap 4, file custom.scss you can add following code:
Bootstrap 4，文件 custom.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
);
by default $grid-gutter-width-base: 30px;
默认情况下 $grid-gutter-width-base: 30px;
