我有两列:

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

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

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

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


当前回答

这也是一种方法。请查看以下网址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>

其他回答

由于您正在使用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-* 它应该是工作…:)

它看起来像这样:http://i.stack.imgur.com/CF5ZV.png

HTML:

<div class="row">
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
</div>

CSS:

div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}
<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

默认情况下,这在外部div中提供了一些填充,这是您需要的方式。此外,您还可以使用自定义CSS修改填充。

在Bootstrap v5.0中,你可以用cssvariable设置gap:

.row {
  --bs-gutter-x: 100px; // column-gap
  --bs-gutter-y: 100px;  // row-gap
}

我需要在移动设备上有一列,在平板电脑肖像上有两列,中间有相等的间距(也没有在列内添加任何网格填充)。可以通过使用空格实用程序和在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>