我有两列:

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

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

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

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


当前回答

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

其他回答

我不认为你能做到这与Bootstrap单独。列与列之间的空间会自动添加/维护。 如果你需要在列之间添加一个特定的宽度,你可以做这个技巧来模拟空间:https://jsfiddle.net/loginet/3rogbh9s/5/

<div class="row">
    <div class="col-6">
        <div class="left-column">Left column</div>
    </div>
    <div class="col-6">
        <div class="right-column">Right column</div>
    </div>
</div>

和CSS

.left-column {
    padding: 10px;
    padding-right: 50px;
    background: white;
}

.right-column { 
    padding: 10px;
    padding-left: 50px; 
    background: white;  
}

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

你可以使用带有边框属性的背景剪辑和盒子模型

.box{
  box-sizing: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}
<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></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>

<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

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