我有两列:

<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;
}

其他回答

使用bootstrap的.form-group类。你的情况是这样的:

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>

Bootstrap 5提供了一种使用g-*类添加cols间隙的更舒适的方法

<div class="container">
  <div class="row g-2">
    <div class="col-6">...</div>
    <div class="col-6">...</div>
  </div>
</div>

文档:https://getbootstrap.com/docs/5.0/layout/gutters/

创建一个类并使用:

利润率:1.5em .5em; Max-width: calc(50% - 1em)!important;

其中max-width上的1em等于左右边距的总和。

这将是有用的。

.list-item { margin-right: -10 px; margin-top: 10 px; margin-bottom: 10 px; 边框:1px实体#eee; 填充:0 px; } < div class = " col-md-4”> < div class = "列表项”> 你的名字< h2 > < / h2 > < / div > < / div > < div class = " col-md-4”> < div class = "列表项" > < / div > < / div >

如果想要增加或减少框的右边的边距,只需编辑列表项的右边距属性。

样例输出

为了获得列之间特定宽度的间距,我们必须在标准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>