我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
引导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>
其他回答
既然你在使用bootstrap，我猜你想让它有响应性。在这种情况下，你不应该使用固定的大小，例如'px'。
作为其他解决方案的变通方案，我建议将两列都设为“col-md-5”而不是“col-md-6”，然后在包含列的父元素“row”中，添加类“justice -content-between”，这将把空闲空间放在中间，就像你可以在bootstrap文档中检查的那样
当然，这个解决方案也适用于两列以上的调整“col-md-x”
希望能有所帮助;)
Bootstrap col稍微使用了一些左边和右边的空间。我刚刚添加了一个块元素，如div，并设置了边界的差异。此外，添加一些额外的填充或空白在额外的div将工作完美。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> < br > < br > < div class = "容器" > < div class = "行" > <div class="col-6 "> <div class="border - border-danger "> < h2 class = " text-center " > < / h2 > 1 < / div > < / div > < div class = " col-6”> <div class="border - border-warning"> < h2 class = " text-center " > < / h2 > 2 < / div > < / div > < / div > < / div >
使用bootstrap的.form-group类。你的情况是这样的:
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
根据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 >
<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;
}
