如何在Bootstrap中的列之间添加间距？
我确信这个问题有一个简单的解决方案。基本上，如果我有两列，我怎么能在它们之间添加一个空格？
e.g。如果html是：
<div class="col-md-6"></div>
<div class="col-md-6"></div>
输出只是两列，彼此相邻，占据了页面的整个宽度。假设宽度设置为1000px，则每个div的宽度为500px。
如果我想在两者之间留出100px空间，我怎么能实现这个目标？显然，通过bootstrap自动将div大小变为450px以补偿空间
33 个答案:
答案 0 :(得分：287)
我遇到了同样的问题;以下对我来说效果很好。希望这有助于有人降落在这里：
<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>
这会自动在2个div之间渲染一些空格。
答案 1 :(得分：128)
您可以使用col-md-offset-* classes, documented here在列之间实现间距。间距是一致的，以便您的所有列正确排列。为了获得均匀的间距和列大小，我将执行以下操作：
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
答案 2 :(得分：66)
我知道我迟到了，但是你可以尝试用填充物隔开盒子。
<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：
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
快点去看看
答案 3 :(得分：10)
这将允许两列之间的空格，显然如果你想改变默认宽度，你可以去mixins修改默认的bootstrap宽度。或者，您可以使用内联CSS样式给出宽度。
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
答案 4 :(得分：10)
我在列之间的空间有类似的问题。根本问题是bootstrap 3和4中的列使用填充而不是边距。因此，两个相邻列的背景颜色相互接触。
我找到了一个适合我们问题的解决方案，并且很可能适用于大多数尝试空间列并保持与网格系统其余部分相同的装订线宽度的人。
这是我们最终的结果
在列之间留下阴影是有问题的。我们不希望列之间有额外的空间。我们只是想让排水沟变得透明＆＃34;所以网站的背景颜色会出现在两个白色列之间。
这是两列的标记
<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
.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;
}
这种方法确实需要一个带有负边距的内部div，就像＆＃34; row＆＃34; class bootstrap使用。而这个div，我们称之为＆＃34;凸起块＃34;，必须是列的直接兄弟
这样您仍然可以在列中获得适当的填充。我已经看到了通过创建空间似乎有效的解决方案，但遗憾的是，它们创建的列在行的任一侧都有额外的填充，因此它最终使行更薄，以便为网格布局设计。如果你看一下所需外观的图像，这意味着两列在一起会小于顶部的一列，这会破坏网格的自然结构。
这种方法的主要缺点是需要额外的标记来包装每列的内容。对我们来说，这是有效的，因为只有特定的列需要它们之间的空间才能达到理想的效果。
答案 5 :(得分：9)
使用bootstrap的.form-group类。在你的情况下像这样：
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
答案 6 :(得分：9)
您可以使用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>
答案 7 :(得分：9)
你可以使用带边框属性的背景剪辑和盒子模型
.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>
答案 8 :(得分：4)
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
);
默认为$ grid-gutter-width-base：30px;
答案 9 :(得分：2)
我必须弄清楚如何为3列做到这一点。我想围绕div的角落，无法让间距工作。我使用了边距。在我的情况下，我认为90％的屏幕由div填充，10％为边距：
HTML：
<div class="row">
<div id="orange" class="col-md-4">
<h1>Orange Div</h1>
</div>
<div id="green" class="col-md-4">
<h1>Green Div</h1>
</div>
<div id="aqua" class="col-md-4">
<h1>Aqua Div</h1>
</div>
</div>
和CSS：
#orange {
background-color:orange;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width:30%;
}
#green {
background-color:green;
border-radius: 30px;
padding: 20px;
margin: 2.5% 0 0 0;
width:30%;
}
#aqua {
background-color:#39F;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width: 30%;
}
为了让移动设备正确调整大小，我将CSS的宽度从width:92.5%;
@media (max-width:1023px)
答案 10 :(得分：2)
在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>
答案 11 :(得分：2)
由于您正在使用 bootstrap ，因此我想您希望响应。在这种情况下，你应该使用固定尺寸，在＆＃39; px＆＃39;例如。
作为其他解决方案的解决方案，我建议制作两个列＆＃34; col-md-5＆＃34;而不是＆＃34; col-md-6＆＃34;，然后在父元素＆＃34; row＆＃34;包含列，添加类＆＃34; justify-content-between＆＃34;，将可用空间放在中间，因为您可以检查引导程序文档here
此解决方案也适用于调整＆＃34; col-md-x＆＃34;当然
希望它有所帮助;）
答案 12 :(得分：1)
由于您使用的是 Bootstrap，column-gap 属性将有助于实现。 W3Schools Column-Gap for Bootstrap 有关于如何使用它的文档。
- CSS：
.col-gap {
column-gap: 2rem;
}
对于 HTML，在行 div 中有类 (col-gap)。 但也要注意这可能会破坏 col-md-6（或其他尺寸）的间距，以便补偿减少每列的尺寸。 （即 col-md-6 -> col-md-5，即使只有 2 列）
- HTML：
//Row
<div class="row col-gap justify-content-center">
//Col 1
<div class="col-md-5 ms-3 card p-5">
<p>Div 1</p>
</div>
//Col 2
<div class="col-md-5 ms-3 card p-5">
<p>Div 2</p>
</div>
</div>
答案 13 :(得分：1)
Bootstrap col 左右稍微使用了一些空格。我刚刚添加了一个块元素，如 div 并为差异设置了边框。还在那个额外的 div 中添加一些额外的填充或边距将完美地工作..
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>
<div class="container">
<div class="row">
<div class="col-6 ">
<div class="border border-danger ">
<h2 class="text-center">1</h2>
</div>
</div>
<div class="col-6">
<div class="border border-warning">
<h2 class="text-center">2</h2>
</div>
</div>
</div>
</div>答案 14 :(得分：1)
我需要在移动设备上放置一列，从平板电脑纵向向上需要两列，中间的间距相等（各列之间也没有添加网格的填充）。可以使用间距实用程序并省略 private EditText inputLastname;
private EditText inputEmail;
private EditText inputPassword;
private EditText inputCity;
private EditText inputPhone;
register_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
try {
User user = new User();
user.setFirstname(inputFirstname.getText().toString());
user.setLastname(inputLastname.getText().toString());
user.setEmail(inputEmail.getText().toString());
user.setPassword(inputPassword.getText().toString());
user.setPhone(Integer.parseInt(inputPhone.getText().toString()));
user.setCity(inputCity.getText().toString());
if (user != null) {
Log.d("message", user.toString().trim());// check if user is populated
databaseManager.createUser(user);// create user method
Toast toast =
Toast.makeText(getApplicationContext(), user.toString().trim(), Toast.LENGTH_LONG);
toast.setMargin(50, 50);
toast.show();
Intent intent = new Intent(getApplicationContext(), login.class);
startActivity(intent);
}
} catch (Exception ex) {
Toast.makeText(register.this, "Registration Failed", Toast.LENGTH_SHORT).show();
System.out.print(ex.toString());
}
}
});
中的数字来实现：
col-md答案 15 :(得分：1)
我知道这篇文章过时了，但是我遇到了同样的问题。我的html示例。
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label asp-for="FirstName" class="control-label"></label>
<input asp-for="FirstName" class="form-control" />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<label asp-for="LastName" class="control-label"></label>
<input asp-for="LastName" class="form-control" />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
</div>
</div>
为了在组之间创建空间，我通过将负边距减少5来覆盖site.css文件中引导程序边距的-15px。
这就是我所做的...
.form-group {
margin-right: -10px;
}
我希望这对其他人有帮助。
答案 16 :(得分：0)
在 Bootstrap v5.0 中，您可以使用 cssvariable 设置间隙：
.row {
--bs-gutter-x: 100px; // column-gap
--bs-gutter-y: 100px; // row-gap
}
答案 17 :(得分：0)
<div class="row">
<div class="col-sm-6">
<div class="card">
Content one
</div>
</div>
<div class="col-sm-6">
<div class="card">
Content two
</div>
</div>
</div>
答案 18 :(得分：0)
创建一个类并使用：
保证金：1.5em .5em; 最大宽度：calc（50％-1em）！important;
其中最大宽度上的1em等于左/右边界相加。
答案 19 :(得分：0)
引导程序4-使用嵌套行分隔列。
<div class="container">
<div class="row bg-info p-3">
<!-- left column -->
<div class="col-8 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
<!-- right column -->
<div class="col-4 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
</div>
</div>
答案 20 :(得分：0)
根据Bootstrap 4 documentation，您应该给父级设置一个负边距mx-n*，给子级设置一个正填充px-*
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
答案 21 :(得分：0)
引导程序4
文档说（here）：
行是列的包装。每列都有水平填充（称为装订线），用于控制它们之间的间距。然后在具有负边距的行上抵消此填充。这样，您列中的所有内容都在视觉上沿左侧向下对齐。
所以正确的答案是：将col的padding-left / right等于减去您的row的margin-left / right。这么简单。
#my-row {
margin-left: -80px;
margin-right: -80px;
}
#my-col {
padding-left: 80px;
padding-right: 80px;
}
演示：https://codepen.io/frouo/pen/OqGaWN
答案 22 :(得分：0)
简单方法
.row div{
padding-left: 8px;
padding-right: 8px;
}
答案 23 :(得分：0)
<div class="col-md-6">
<div class="inner">
<!-- Put the col-6 elements in the inner div -->
</div>
</div>
默认情况下，这会在您需要的方式中在外部div中提供一些填充。此外，您还可以使用自定义CSS修改填充。
答案 24 :(得分：0)
使用css添加与背景颜色相同的边框怎么样？我对此很陌生，所以也许有一个很好的理由不这样做，但是当我尝试它时看起来很好。
答案 25 :(得分：0)
<div class="col-md-12 no_padding header_row"></div>
<div class="second_row">
<div class="col-md-4 box_shadow"></div>
<div class="col-md-8 no_padding_right">
<div class="col-md-12 box_shadow"></div>
</div>
</div>
body{
background:#F0F0F0;
}
.main_holder{
min-height: 600px;
margin-top: 40px;
height: 600px;
}
.box_shadow{
box-shadow: 0 1px 2px rgba(0,0,0,.1);
background: white;
height: auto;
min-height: 500px;
}
.no_padding{
padding: 0px !important;
}
.no_padding_right{
padding-right: 0px !important;
}
.header_row{
height: 60px;
background: #00796B;
-webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
-moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
}
.second_row{
position: relative;
width: 100% !important;
top: 20px;
}
答案 26 :(得分：0)
围绕包裹元素的白色边框
.padding-pls{
border-left: 13px solid white;
border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
border-right: 0px solid white;
}
并且第一个+最后一个孩子没有边框
<div class="row">
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
</div>
答案 27 :(得分：0)
这将是有用的..
.list-item{
margin-right:-10px;
margin-top:10px;
margin-bottom: 10px;
border: 1px solid #eee;
padding: 0px;
}<div class="col-md-4">
<div class="list-item">
<h2>Your name</h2>
</div>
</div>
<div class="col-md-4">
<div class="list-item"></div>
</div>
如果使用想要增加或减少框右侧的进一步边距，则只需编辑list-item的margin-right属性。
示例输出
答案 28 :(得分：0)
很简单..你必须向右边添加实线边框，左边是col- * 它应该是工作.. :)）
它看起来像这样：http://i.stack.imgur.com/CF5ZV.png
HTML：
<div class="row">
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
</div>
CSS：
div#services_block {
height: 355px;
background-color: #33363a;
border-left:3px solid white;
border-right:3px solid white;
}
答案 29 :(得分：0)
要获得列之间特定的间距宽度，我们必须在标准的Bootstrap布局中设置$(document).on('keyup', '#list tr:last td:nth-last-child(2) input[name=second]', function (event) {
。
padding@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) {
.space-100-px > .row > .col-md-6:first-child {
padding: 0 50px 0 0; /* The first half of 100px */
}
.space-100-px > .row > .col-md-6:last-child {
padding: 0 0 0 50px; /* The second half of 100px */
}
}
/* The result will be easier to see. */
.space-100-px img {
width: 100%;
height: auto;
}
答案 30 :(得分：-1)
这也是实现它及其工作的一种方式。请检查以下网址https://jsfiddle.net/sarfarazk/ofgqm0sh/
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="col-md-6">
<div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>
</div>
</div>
答案 31 :(得分：-2)
使用左边距是解决方法：
<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>
工作完美
答案 32 :(得分：-3)
在最新的引导程序版本中，您可以使用“卡片”
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？