Html Bootstrap：在列之间添加边距/填充空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22989515/
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
Bootstrap: add margin/padding space between columns
提问by bodruk
I'm trying to put some extra margin/padding space between columns on my Bootstrap grid layout. I've tried thisbut I don't like the result. Here is my code:
我正在尝试在 Bootstrap 网格布局的列之间放置一些额外的边距/填充空间。我试过这个，但我不喜欢这个结果。这是我的代码：
<div class="row">
<div class="text-center col-md-6">
Widget 1
</div>
<div class="text-center col-md-6">
Widget 2
</div>
</div>
I want to add margin: 10pxand padding:10px. Some people suggest to change their classes to col-md-5with pull-leftand pull-right, but the gap between them will be too large.
我想添加margin: 10px和padding:10px。有些人建议将他们的类改为col-md-5withpull-left和pull-right，但它们之间的差距会太大。
采纳答案by Zim
Update 2018
2018 年更新
Bootstrap 4now has spacing utilitiesthat make adding (or substracting) the space (gutter) between columns easier. Extra CSS isn't necessary.
Bootstrap 4现在具有间距实用程序，可以更轻松地添加（或减去）列之间的空间（装订线）。不需要额外的 CSS。
<div class="row">
<div class="text-center col-md-6">
<div class="mr-2">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="ml-2">Widget 2</div>
</div>
</div>
You can adjust margins on the column contentsusing the marginutils such as ml-0(margin-left:0), mr-0(margin-right:0), mx-1(.25rem left & right margins), etc...
您可以使用边距工具调整列内容的边距，例如ml-0(margin-left:0)、mr-0(margin-right:0)、mx-1(.25rem 左右边距) 等...
Or,you can adjust padding on the columns(col-*) using the paddingutils such as pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding), etc...
或者，可以调整在列填充用（*同事）填充utils的如PL-0（填充左：0），PR-0（填充右：0），PX-2（左.50rem＆正确的填充）等...
Bootstrap 4 Column Spacing Demo
Notes
笔记
- Changing the left/right margin(s) on
col-*will break the grid. - Change the left/right margin(s) on the content of
col-*works. - Change the left/right padding on the
col-*also works.
- 更改左/右页边距
col-*将破坏网格。 - 更改
col-*作品内容的左/右页边距 。 - 更改左/右填充
col-*也有效。
回答by Jon Harding
Simply add a div within col-md-6that has the extra padding that you need. The col-md-6is the 'backbone' to keep the column integrity, but you can add additional padding within it.
只需在col-md-6其中添加一个具有您需要的额外填充的 div 。这col-md-6是保持列完整性的“主干”，但您可以在其中添加额外的填充。
<div class="row">
<div class="text-center col-md-6">
<div class="classWithPad">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">Widget 2</div>
</div>
</div>
CSS
CSS
.classWithPad { margin:10px; padding:10px; }
回答by krishna kinnera
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">
Set room heater temperature
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
</div>
This will automatically render some space between the 2 divs.
这将自动渲染 2 个 div 之间的一些空间。
回答by Madhukar Hiriadka
Just add 'justify-content-around' class. that would automatically add gap between 2 divs.
只需添加'justify-content-around'类。这将自动添加 2 个 div 之间的间隙。
Documentation: https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment
文档：https: //getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment
Sample:
样本：
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
回答by karimeh
You may use the padding and margin shorthand Bootstrap 4 classes as follows:
您可以使用如下的填充和边距速记 Bootstrap 4 类：
For extra small devices i.e. xs
对于超小型设备，即 xs
{property}{sides}-{size}
For other devices/viewports (small, medium, large and extra large)
对于其他设备/视口（小、中、大和超大）
{property}{sides}-{breakpoint}-{size}
Where:
在哪里：
property = m for margin and p for padding
Following are sides shorthand meanings:
以下是边的速记含义：
l = defines the left-margin or left-padding
r = defines the right-margin or right-padding
t = defines the top-margin or top-padding
b = defines the bottom-margin or right-padding
x = For setting left and right padding and margins by the single call
y = For setting top and bottom margins
blank = margin and padding for all sides
The breakpoint = sm, md, lg, and xl.
断点 = sm、md、lg 和 xl。
Combining all the above, the left padding complete code can be (for example):
综合以上，左填充完整代码可以是（例如）：
For left padding in extra small devices
用于超小型设备中的左填充
pl-2
pl-2
or for medium to extra large
或用于中型到超大型
pl-md-2
pl-md-2
回答by thethakuri
I would keep an extra column in the middle for larger displays and reset to default when the columns collapse on smaller displays. Something like this:
对于较大的显示器，我会在中间保留一个额外的列，并在列在较小的显示器上折叠时重置为默认值。像这样的东西：
<div class="row">
<div class="text-center col-md-5 col-sm-6">
Widget 1
</div>
<div class="col-md-2">
<!-- Gap between columns -->
</div>
<div class="text-center col-md-5 col-sm-6">
Widget 2
</div>
</div>
回答by Emmanuel Osimosu
Super easy with flexbox. Leave room for some space by changing the columns to col-md-5
使用 flexbox 非常容易。通过将列更改为留出一些空间col-md-5
<div class="row widgets">
<div class="text-center col-md-5">
Widget 1
</div>
<div class="text-center col-md-5">
Widget 2
</div>
</div>
CSS
CSS
.widgets {
display: flex;
justify-content: space-around;
}
回答by mihau
In the otherside if you like to remove double padding between columns just add class "nogap" inside row
在另一边，如果您想删除列之间的双填充，只需在行内添加类“nogap”
<div class="row nogap">
<div class="text-center col-md-6">Widget 1</div>
<div class="text-center col-md-6">Widget 2</div>
</div>
and create additional css class for it
并为它创建额外的 css 类
.nogap > .col{ padding-left:7.5px; padding-right: 7.5px}
.nogap > .col:first-child{ padding-left: 15px; }
.nogap > .col:last-child{ padding-right: 15px; }
Thats it, check here: https://codepen.io/michal-lukasik/pen/xXvoYJ
就是这样，在这里查看：https: //codepen.io/michal-lukasik/pen/xXvoYJ
回答by omar faruque
Try This:
尝试这个：
<div class="row">
<div class="text-center col-md-6">
<div class="col-md-12">
Widget 1
</div>
</div>
<div class="text-center col-md-6">
<div class="col-md-12">
Widget 2
</div>
</div>
</div>
回答by rinnegan
I had the same issue and worked it out by nesting a div inside bootstrap col and adding padding to it. Something like:
我遇到了同样的问题，并通过在 bootstrap col 中嵌套一个 div 并为其添加填充来解决这个问题。就像是：
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
</div>
</div>
