我有两列:

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

我怎么在它们之间加一个空格?

输出只是两个相邻的列,占据了整个页面的宽度。假设宽度设置为1000px,那么每个div将是500px宽。

如果我想在两者之间有一个100px的空间,我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。


当前回答

我也面临着同样的问题;下面的方法对我很有效。

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

这将自动在两个div之间渲染一些空间。

其他回答

由于您正在使用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>

我需要在移动设备上有一列,在平板电脑肖像上有两列,中间有相等的间距(也没有在列内添加任何网格填充)。可以通过使用空格实用程序和在col-md中省略数字来实现:

    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
            <div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
        </div>
    </div>

您可以使用此处文档中的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

我必须弄清楚如何对3列做这个。我想绕过divs的角落,但无法获得空间的工作。我用了边距。在我的例子中,我认为90%的屏幕由div填充,10%的空白:

html:

<div class="row">
  <div id="orange" class="col-md-4">
    <h1>Orange Div</h1>
  </div>
  <div id="green" class="col-md-4">
    <h1>Green Div</h1>
  </div>
  <div id="aqua" class="col-md-4">
    <h1>Aqua Div</h1>
  </div>
</div>

和CSS:

#orange {
    background-color:orange;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width:30%;
}
#green {
    background-color:green;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 0 0 0;
    width:30%;
}
#aqua {
    background-color:#39F;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width: 30%;
}

为了让它在移动设备上正确调整大小,我让CSS将宽度从30%更改为宽度:92.5%;在@media下(max-width:1023px)

这将允许两列之间有一个空间,显然,如果你想改变默认宽度,你可以使用mixins来修改默认的引导宽度。或者,您可以使用内联CSS样式给出宽度。

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>