我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列,占据了整个页面的宽度。假设宽度设置为1000px,那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间,我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列,占据了整个页面的宽度。假设宽度设置为1000px,那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间,我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
根据Bootstrap 4文档,你应该给父元素一个负边距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">自定义列填充</div> < / div > <div class="col px-5"> <div class="p-3 border bg-light">自定义列填充</div> < / div > < / div >
其他回答
简单的方法
.row div{
padding-left: 8px;
padding-right: 8px;
}
您可以使用此处文档中的col-md-offset-*类来实现列之间的间距。间距是一致的,这样所有的列都能正确对齐。为了获得均匀的间距和列大小,我将执行以下操作:
<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
为了获得列之间特定宽度的间距,我们必须在标准Bootstrap的布局中设置填充。
@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; } <div class="container-fluid space-100-px"> <div class="row"> <div class="col-md-6"> <img src="http://placehold.it/450x100?text=Left" alt="Left"> </div> <div class="col-md-6"> <img src="http://placehold.it/450x100?text=Right" alt="Right"> </div> </div> </div>
使用左边距是正确的方法:
<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>
完美的作品
很简单。你必须添加固体边界右,左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;
}