我有两列:
<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来补偿间距。
当前回答
<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;
}
其他回答
用css添加一个与背景颜色相同的边框怎么样?我是新手,所以也许有一个很好的理由不这样做,但当我尝试它时,它看起来很好。
引导4
文档说(这里):
行是列的包装器。每个列都有水平填充(称为沟槽),用于控制它们之间的空间。然后在具有负边距的行上抵消此填充。通过这种方式,列中的所有内容在视觉上都在左侧对齐。
所以正确答案是:设置cols' padding-left/right = - row's 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
为了获得列之间特定宽度的间距,我们必须在标准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>
引导4,文件自定义。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;
这也是一种方法。请查看以下网址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>