我有两列:

<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,列间距属性将有助于实现。W3Schools Column-Gap for Bootstrap有关于如何使用它的文档。

CSS:

.col-gap {
  column-gap: 2rem;
}

对于HTML,将类(col-gap)放在行div中。 但也要注意,这可能会影响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>

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

我知道这篇文章有点过时,但我遇到了同样的问题。我的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>

为了在组之间创建空间,我在site.css文件中通过减少5的负边距来覆盖bootstrap的-15px的边距。

我是这么做的……

.form-group {
    margin-right: -10px;
}

我希望这能帮助到其他人。

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