blocks|key|25867|text|您可以使用col-md-offset-*+classes,+documented+here实现列之间的间距。间距是一致的，这样所有列都可以正确对齐。为了获得均匀的间距和列大小，我将执行以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|25868|<div+class="row">
++<div+class="col-md-5"></div>
++<div+class="col-md-5+col-md-offset-2"></div>
</div>|code-block|syntax|javascript|25869|在Bootstrap+4中使用：offset-2或offset-md-2|25870|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/3.3/css/#grid-offsetting^0|5|F|5|14|0|0|0|G|8|P|B|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>You can achieve spacing between columns using the <a href="https://getbootstrap.com/docs/3.3/css/#grid-offsetting" rel="noreferrer"><code>col-md-offset-*</code> classes, documented here</a>. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:</p>
<pre><code>&lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-md-5&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;col-md-5 col-md-offset-2&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>In Bootstrap 4 use: <code>offset-2</code> or <code>offset-md-2</code></p>


blocks|key|25889|text|这将在两列之间留出一个空格，显然，如果您想要更改缺省宽度，可以使用混入来修改缺省引导宽度。或者，您可以使用内联CSS样式提供宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|25890|<div+class="col-md-5+pull-left"></div>
<div+class="col-md-5+pull-right"></div>|code-block|syntax|javascript|25891|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This will allow a space between the two columns and obviously if you want to change the default width you can go for mixins to modify the default bootstrap width. Or, you can give the width using the inline CSS style.</p>

<pre><code>&lt;div class="col-md-5 pull-left"&gt;&lt;/div&gt;
&lt;div class="col-md-5 pull-right"&gt;&lt;/div&gt;
</code></pre>


blocks|key|25935|text|我知道我来晚了，但你可以试着用填充物把盒子隔开。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|25936|<div+class="col-md-6+box">
++++++++<div+class="inner">Hello</div>
</div>
<div+class="col-md-6+box">
++++++++<div+class="inner">Hello</div>
</div>|code-block|syntax|javascript|25937|CSS：|25938|.box+{
++++padding:+0+5px+0+5px;
}
.box+.inner+{
++++background-color:+#fff;
}|25939|试一试|25940|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I know I'm late to the party, but you could try spacing the boxes with padding.</p>

<pre><code>&lt;div class="col-md-6 box"&gt;
        &lt;div class="inner"&gt;Hello&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-6 box"&gt;
        &lt;div class="inner"&gt;Hello&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}
</code></pre>

<p>Have a go at it</p>


blocks|key|25955|text|使用bootstrap的.form-group类。在您的案例中如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|25956|<div+class="col-md-6+form-group"></div>
<div+class="col-md-6+form-group"></div>|code-block|syntax|javascript|25957|entityMap^0|C|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Use bootstrap's <code>.form-group</code> class. Like this in your case:</p>

<pre><code>&lt;div class="col-md-6 form-group"&gt;&lt;/div&gt;
&lt;div class="col-md-6 form-group"&gt;&lt;/div&gt;
</code></pre>


blocks|key|242732|text|使用css添加一个与背景颜色相同的边框怎么样？我是新手，所以可能有一个很好的理由不这样做，但当我尝试它时，它看起来很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|242733|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>How about just adding a border the same color as the background using css? I'm new to this, so maybe there's a good reason not to, but it looked good when I tried it.</p>


blocks|key|242787|text|我也面临着同样的问题；下面的方法对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|242788|<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>|code-block|syntax|javascript|242789|这将自动渲染两个div之间的一些空间。|242790|​|242791|📷|atomic|offset|length|242792|242793|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/4677a8be6c061c85994f28159faad4c9.png|imageAlt^0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|13|8|@]|9|@$N|14|O|15|1|16]]|A|$]]|$1|P|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]]]

<p>I was facing the same issue; and the following worked well for me.</p>
<pre><code>&lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;div class=&quot;col-md-12&quot;&gt;
        Some Content.. 
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;div class=&quot;col-md-12&quot;&gt;
        Some Second Content.. 
     &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>This will automatically render some space between the 2 divs.</p>
<p><img src="https://i.stack.imgur.com/I1f7r.png" alt="enter image description here" /></p>


blocks|key|26032|text|您可以在下面编码的col-xs-*+div中使用col-xs-*类来实现列之间的间距。间距是一致的，这样所有列都可以正确对齐。为了获得均匀的间距和列大小，我将执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26033|<div+class="container">
++++<div+class="col-md-3+">
++++++++<div+class="col-md-12+well">
++++++++++++Some+Content..
++++++++</div>
++++</div>
++++<div+class="col-md-3+">
++++++++<div+class="col-md-12+well">
++++++++++++Some+Second+Content..
++++++++</div>
++++</div>
++++<div+class="col-md-3+">
++++++++<div+class="col-md-12+well">
++++++++++++Some+Second+Content..
++++++++</div>
++++</div>
++++<div+class="col-md-3+">
++++++++<div+class="col-md-12+well">
++++++++++++Some+Second+Content..
++++++++</div>
++++</div>
++++<div+class="col-md-3+">
++++++++<div+class="col-md-12+well">
++++++++++++Some+Second+Content..
++++++++</div>
++++</div>
++++<div+class="col-md-3+">
++++++++<div+class="col-md-12+well">
++++++++++++Some+Second+Content..
++++++++</div>
++++</div>
++++<div+class="col-md-3+">
++++++++<div+class="col-md-12+well">
++++++++++++Some+Second+Content..
++++++++</div>
++++</div>
++++<div+class="col-md-3+">
++++++++<div+class="col-md-12+well">
++++++++++++Some+Second+Content..
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|26034|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can achieve spacing between columns using the col-xs-* classes,within in a  col-xs-* div coded below. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="col-md-3 "&gt;
        &lt;div class="col-md-12 well"&gt;
            Some Content..
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3 "&gt;
        &lt;div class="col-md-12 well"&gt;
            Some Second Content..
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3 "&gt;
        &lt;div class="col-md-12 well"&gt;
            Some Second Content..
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3 "&gt;
        &lt;div class="col-md-12 well"&gt;
            Some Second Content..
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3 "&gt;
        &lt;div class="col-md-12 well"&gt;
            Some Second Content..
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3 "&gt;
        &lt;div class="col-md-12 well"&gt;
            Some Second Content..
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3 "&gt;
        &lt;div class="col-md-12 well"&gt;
            Some Second Content..
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3 "&gt;
        &lt;div class="col-md-12 well"&gt;
            Some Second Content..
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|26060|text|很简单..。您必须将实线边框右、左添加到col1-*，它应该是work..：)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26061|它看起来像这样：http://i.stack.imgur.com/CF5ZV.png|offset|length|26062|HTML：|26063|<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>|code-block|syntax|javascript|26064|CSS：|26065|div#services_block+{
+++height:+355px;
+++background-color:+#33363a;
+++border-left:3px+solid+white;
+++border-right:3px+solid+white;
}|26066|entityMap|0|LINK|mutability|MUTABLE|url|http://i.stack.imgur.com/CF5ZV.png^0|0|8|Y|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>it's simple .. you have to add solid border right, left to col-* 
and it should be work ..:)</p>

<p>it looks like this : <a href="http://i.stack.imgur.com/CF5ZV.png" rel="nofollow">http://i.stack.imgur.com/CF5ZV.png</a></p>

<p>HTML :</p>

<pre><code>&lt;div class="row"&gt;
     &lt;div class="col-sm-3" id="services_block"&gt;

     &lt;/div&gt;
     &lt;div class="col-sm-3" id="services_block"&gt;

     &lt;/div&gt;
     &lt;div class="col-sm-3" id="services_block"&gt;

     &lt;/div&gt;
     &lt;div class="col-sm-3" id="services_block"&gt;

     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS :</p>

<pre><code>div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}
</code></pre>


blocks|key|242870|text|我也遇到过类似的列间距问题。根本问题是bootstrap+3和4中的列使用填充而不是边距。因此，两个相邻列的背景色相互接触。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|242871|我找到了一个适合我们的问题的解决方案，并且很可能适用于大多数人，他们试图间隔列，并保持与网格系统的其余部分相同的间隔宽度。|242872|这就是我们想要的最终结果。|242873|​|242874|📷|atomic|offset|length|242875|242876|在列之间有阴影的间隙是有问题的。我们不希望列之间有额外的空格。我们只是想让间隔是“透明的”，这样网站的背景颜色就会出现在两个白色的列之间。|242877|这是这两列的标记|242878|<div+class="row">
++++<div+class="col-sm-7">
++++++++<div+class="raised-block">
++++++++++++<h3>Facebook</h3>
++++++++</div>
++++</div>
++++<div+class="col-sm-5">
++++++++<div+class="raised-block">
++++++++++++<h3>Tweets</h3>
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|242879|CSS|242880|.raised-block+{
++++background-color:+#fff;
++++margin-bottom:+10px;
++++margin-left:+0;
++++margin-right:+-0.625rem;+//+for+us+0.625rem+==+10px
++++padding-left:+0.625rem;
++++padding-right:+0.625rem;
}
@media+(max-width:+33.9em){+//+this+is+for+our+mobile+layout+where+columns+stack
++++.raised-block+{
++++++++margin-left:+-0.625rem;
++++}
}
.row+[class%5E="col-"]:first-child>.raised-block+{
++++//+this+is+so+the+first+column+has+no+margin+so+it+will+not+be+"indented"
++++margin-left:+-0.625rem;
}|242881|这种方法确实要求内部div具有负边距，就像"row“类bootstrap使用的那样。这个div，我们称之为“提升块”，必须是列的直接同级。|242882|这样一来，你仍然可以在你的列中得到适当的填充。我见过一些似乎通过创建空间来工作的解决方案，但不幸的是，它们创建的列在行的两边都有额外的填充，因此它最终使行变得更细，而网格布局正是为此而设计的。如果你看一下图像中想要的外观，这意味着两列在一起会比顶部的大一列小，这会破坏网格的自然结构。|242883|这种方法的主要缺点是需要额外的标记来包装每一列的内容。对我们来说，这是可行的，因为只有特定的列需要它们之间的空间才能实现所需的外观。|242884|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/b227055a2877aa1028a32ba2b64109e5.png|imageAlt^0|0|0|0|0|0|1|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1H|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1I|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1J|8|@]|9|@$K|1K|L|1L|1|1M]]|A|$]]|$1|M|3|G|5|6|7|1N|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1O|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1P|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1Q|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1R|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|T|7|1S|8|@]|9|@]|A|$U|V]]|$1|10|3|11|5|6|7|1T|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1U|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1V|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|1D|1E|-4]]]]

<p>I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.</p>

<p>I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.</p>

<p>This was the end result we were going for</p>

<p><a href="https://i.stack.imgur.com/CdrZp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CdrZp.png" alt="enter image description here"></a></p>

<p>Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.</p>

<p>this is the markup for the two columns</p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-sm-7"&gt;
        &lt;div class="raised-block"&gt;
            &lt;h3&gt;Facebook&lt;/h3&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-5"&gt;
        &lt;div class="raised-block"&gt;
            &lt;h3&gt;Tweets&lt;/h3&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child&gt;.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}
</code></pre>

<p>This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column</p>

<p>This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.</p>

<p>The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.</p>


blocks|key|242936|text|我必须弄清楚如何在3列中做到这一点。我想要圆角的div，但无法获得间距的工作。我使用了边距。在我的例子中，我计算了90%25的屏幕由div填充，10%25的边距：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|242937|html：|242938|<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>|code-block|syntax|javascript|242939|和CSS：|242940|#orange+{
++++background-color:orange;
++++border-radius:+30px;
++++padding:+20px;
++++margin:+2.5%25+2.5%25+0+2.5%25;
++++width:30%25;
}
#green+{
++++background-color:green;
++++border-radius:+30px;
++++padding:+20px;
++++margin:+2.5%25+0+0+0;
++++width:30%25;
}
#aqua+{
++++background-color:#39F;
++++border-radius:+30px;
++++padding:+20px;
++++margin:+2.5%25+2.5%25+0+2.5%25;
++++width:+30%25;
}|242941|为了让它在移动设备上正确地调整大小，我让CSS在@media+(max-width:1023px)下将宽度从30%25改为width:92.5%25;|offset|length|style|CODE|242942|entityMap^0|0|0|0|0|0|O|P|1N|C|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@$O|10|P|11|Q|R]|$O|12|P|13|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

<p>I had to figure out how to do this for 3 columns.  I wanted to round the corners of the divs and couldn't get the spacing to work.  I used margins.  In my case I figured for 90% of the screen to be filled in by the divs and 10% for margins:</p>

<p>html:</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div id="orange" class="col-md-4"&gt;
    &lt;h1&gt;Orange Div&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="green" class="col-md-4"&gt;
    &lt;h1&gt;Green Div&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="aqua" class="col-md-4"&gt;
    &lt;h1&gt;Aqua Div&lt;/h1&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and CSS: </p>

<pre><code>#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%;
}
</code></pre>

<p>To make it resize correctly for mobile devices, I had the CSS change the width from 30% to <code>width:92.5%;</code> under <code>@media (max-width:1023px)</code></p>


blocks|key|26179|text|为了获得特定宽度的列间距，我们必须在标准Bootstrap的布局中设置padding。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|26180|​|26181|@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%25;
++height:+auto;
}|code-block|syntax|javascript|26182|<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>|26183|26184|entityMap^0|Z|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>To obtain a particular width of spacing between columns, we have to set up <code>padding</code> in the standard Bootstrap's layout.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@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 &gt; .row &gt; .col-md-6:first-child {
    padding: 0 50px 0 0; /* The first half of 100px */
  }
  .space-100-px &gt; .row &gt; .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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid space-100-px"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;
      &lt;img src="http://placehold.it/450x100?text=Left" alt="Left"&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
      &lt;img src="http://placehold.it/450x100?text=Right" alt="Right"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|26207|text|你可以使用背景剪辑和具有边框属性的框模型|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26208|.box{
++box-sizing:+border-box;
++border:+3px+solid+transparent;
++background-clip:padding-box;
}|code-block|syntax|javascript|26209|<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>|26210|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>you can use background-clip and box-model with border proprety</p>
<pre class="lang-css prettyprint-override"><code>.box{
  box-sizing: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}
</code></pre>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-xs-4 box&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;col-xs-4 box&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;col-xs-4 box&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>



blocks|key|243058|text|在col-md-？中，创建另一个div并将图片放入该div中，然后您可以像这样轻松地添加填充。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|243059|<div+class="row">
++<div+class="col-md-8">
+++++<div+class="thumbnail">
+++++++<img+src="#"/>
+++++</div>
++</div>
++<div+class="col-md-4">
+++++<div+class="thumbnail">
+++++++<img+src="#"/>
+++++</div>
++</div>+++
</div>

<style>
++thumbnail{
+++++padding:4px;
+++++++++++}
</style>|code-block|syntax|javascript|243060|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Inside the col-md-?, create another div and put picture in that div, than you can easily add padding like so.</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="col-md-8"&gt;
     &lt;div class="thumbnail"&gt;
       &lt;img src="#"/&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-4"&gt;
     &lt;div class="thumbnail"&gt;
       &lt;img src="#"/&gt;
     &lt;/div&gt;
  &lt;/div&gt;   
&lt;/div&gt;

&lt;style&gt;
  thumbnail{
     padding:4px;
           }
&lt;/style&gt;
</code></pre>


blocks|key|26239|text|包装元素周围只有白色边框|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26240|.padding-pls{
++border-left:+13px+solid+white;
++border-right:+13px+solid+white;
}
.row+.col-md-6:first-child>.padding-pls+{
++border-left:+0px+solid+white;
}
.row+.col-md-6:last-child>.padding-pls+{
++border-right:+0px+solid+white;
}|code-block|syntax|javascript|26241|和first%2Blast子级无边界|26242|++++<div+class="row">
++++++<div+class="col-md-6">
++++++++<div+class="col-md-12+padding-pls">
++++++++++Keci
++++++++</div>
++++++</div>
++++++<div+class="col-md-6">
++++++++<div+class="col-md-12+padding-pls">
++++++++++Keci
++++++++</div>
++++++</div>
++</div>|26243|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Just white border around wrap element</p>

<pre><code>.padding-pls{
  border-left: 13px solid white;
  border-right: 13px solid white;
}
.row .col-md-6:first-child&gt;.padding-pls {
  border-left: 0px solid white;
}
.row .col-md-6:last-child&gt;.padding-pls {
  border-right: 0px solid white;
}
</code></pre>

<p>and first+last child no border</p>

<pre><code>    &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
        &lt;div class="col-md-12 padding-pls"&gt;
          Keci
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
        &lt;div class="col-md-12 padding-pls"&gt;
          Keci
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
</code></pre>


blocks|key|243080|text|++++<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%25+!important;
++++top:+20px;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|243081|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>    &lt;div class="col-md-12 no_padding header_row"&gt;&lt;/div&gt;



    &lt;div class="second_row"&gt;
        &lt;div class="col-md-4 box_shadow"&gt;&lt;/div&gt;
        &lt;div class="col-md-8 no_padding_right"&gt;
            &lt;div class="col-md-12 box_shadow"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;


    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;
}
</code></pre>


blocks|key|243117|text|<div+class="col-md-6">
++++<div+class="inner">
++++++++
++++</div>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|243118|默认情况下，这会按照您需要的方式在外部div中提供一些填充。此外，您还可以使用自定义CSS修改填充。|unstyled|243119|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;div class="col-md-6"&gt;
    &lt;div class="inner"&gt;
        &lt;!-- Put the col-6 elements in the inner div --&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This by default provides some padding inside the outer div the way you seem to need. Moreover you can also modify the padding using custom CSS.</p>


blocks|key|243150|text|这也是一种做它的方法和它的工作。请检查以下url+https://jsfiddle.net/sarfarazk/ofgqm0sh/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|243151|<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>|code-block|syntax|javascript|243152|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/sarfarazk/ofgqm0sh/^0|P|14|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>This also one way of doing it and its works. Please check the following url <a href="https://jsfiddle.net/sarfarazk/ofgqm0sh/" rel="nofollow noreferrer">https://jsfiddle.net/sarfarazk/ofgqm0sh/</a></p>

<pre><code>&lt;div class="container"&gt;
 &lt;div class="row"&gt;
  &lt;div class="col-md-6"&gt;
    &lt;div class="bg-success"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-6"&gt;
    &lt;div class="bg-warning"&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|243167|text|简单的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|243168|.row+div{
++padding-left:+8px;
++padding-right:+8px;
}|code-block|syntax|javascript|243169|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simple Way</p>

<pre><code>.row div{
  padding-left: 8px;
  padding-right: 8px;
}
</code></pre>


blocks|key|26350|text|我知道这篇文章有点过时，但我也遇到了同样的问题。我的html的例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26351|<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>|code-block|syntax|javascript|26352|为了在组之间创建空间，我在site.css文件中覆盖了bootstrap的-15px边距，将负边距减少了5。|26353|这是我所做的..。|26354|.form-group+{
++++margin-right:+-10px;
}|26355|我希望这对其他人有帮助。|26356|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I know this post is a little dated but I ran in to this same problem. Example of my html.</p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-3"&gt;
        &lt;div class="form-group"&gt;
            &lt;label asp-for="FirstName" class="control-label"&gt;&lt;/label&gt;
            &lt;input asp-for="FirstName" class="form-control" /&gt;
            &lt;span asp-validation-for="FirstName" class="text-danger"&gt;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-3"&gt;
        &lt;div class="form-group"&gt;
            &lt;label asp-for="LastName" class="control-label"&gt;&lt;/label&gt;
            &lt;input asp-for="LastName" class="form-control" /&gt;
            &lt;span asp-validation-for="LastName" class="text-danger"&gt;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;            
&lt;/div&gt;
</code></pre>

<p>In order to create space between the groups I overrode bootstrap's margin of -15px in my site.css file by reducing the negative margin by 5. </p>

<p>Here's what I did...</p>

<pre><code>.form-group {
    margin-right: -10px;
}
</code></pre>

<p>I hope this helps somebody else.</p>


blocks|key|26378|text|我需要一列在移动设备上，两列从平板电脑肖像向上，它们之间的间距在中间相等(列内也没有任何添加网格的填充)。可以使用空格实用程序并省略col-md中的数字来实现|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|26379|++++<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>|code-block|syntax|javascript|26380|entityMap^0|1U|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I needed one column on mobile and two columns from tablet portrait up, with equal spacing between them in the middle (also without any grid-added padding inside columns). Could be achieved using spacing utilities and omitting the number in <code>col-md</code>:</p>

<pre class="lang-html prettyprint-override"><code>    &lt;div class="container-fluid px-0"&gt;
        &lt;div class="row no-gutters"&gt;
            &lt;div class="col-sm-12 col-md mr-md-3" style="background-color: orange"&gt;
                &lt;p&gt;&lt;strong&gt;Column 1&lt;/strong&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-12 col-md ml-md-3" style="background-color: orange"&gt;
                &lt;p&gt;&lt;strong&gt;Column 1&lt;/strong&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

</code></pre>


blocks|key|26391|text|根据Bootstrap+4+documentation，您应该给父节点一个负的边距mx-n*，而给孩子一个正的填充px-*|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|26392|​|26393|<link+href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"+rel="stylesheet"+/>
<div+class="row+mx-n5">
++<div+class="col+px-5">
++++<div+class="p-3+border+bg-light">Custom+column+padding</div>
++</div>
++<div+class="col+px-5">
++++<div+class="p-3+border+bg-light">Custom+column+padding</div>
++</div>
</div>|code-block|syntax|javascript|26394|26395|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.3/utilities/spacing/^0|15|5|1L|4|E|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

<p>According to Bootstrap 4 <a href="https://getbootstrap.com/docs/4.3/utilities/spacing/" rel="noreferrer">documentation</a> you should give the parent a negative margin <code>mx-n*</code>, and the children a positive padding <code>px-*</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
&lt;div class="row mx-n5"&gt;
  &lt;div class="col px-5"&gt;
    &lt;div class="p-3 border bg-light"&gt;Custom column padding&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col px-5"&gt;
    &lt;div class="p-3 border bg-light"&gt;Custom column padding&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|243230|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|243231|📷|atomic|offset|length|243232|243233|Bootstrap+4-使用嵌套行分隔列。|243234|<div+class="container">
++++<div+class="row+bg-info+p-3">

++++++++
++++++++<div+class="col-8+">
++++++++++++<div+class="col-12+bg-light+p-3">
++++++++++++++++Lorem+ipsum+dolor+sit+amet+consectetur+adipisicing+elit.+Porro+error+enim,+perferendis+rerum,+sit+laudantium+alias+esse+quas+quae+mollitia+illum+suscipit+veritatis+distinctio+facere+officia+ullam+repellendus+accusamus+odio!
++++++++++++</div>
++++++++</div>

++++++++
++++++++<div+class="col-4+">
++++++++++++<div+class="col-12+bg-light+p-3">
++++++++++++++++Lorem+ipsum+dolor+sit+amet+consectetur+adipisicing+elit.+Porro+error+enim,+perferendis+rerum,+sit+laudantium+alias+esse+quas+quae+mollitia+illum+suscipit+veritatis+distinctio+facere+officia+ullam+repellendus+accusamus+odio!
++++++++++++</div>
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|243235|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/f51dd7d7dde052b84412b4cd89c6d203.png|imageAlt^0|0|0|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@$E|Z|F|10|1|11]]|A|$]]|$1|G|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

<p><a href="https://i.stack.imgur.com/m7uAr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m7uAr.png" alt="enter image description here"></a></p>

<p>Bootstrap 4 - Separate columns using nested rows.</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="row bg-info p-3"&gt;

        &lt;!-- left column --&gt;
        &lt;div class="col-8 "&gt;
            &lt;div class="col-12 bg-light p-3"&gt;
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- right column --&gt;
        &lt;div class="col-4 "&gt;
            &lt;div class="col-12 bg-light p-3"&gt;
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|243275|text|使用left-left是一种可行的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|243276|<div+style="margin-left:-2px"+class="col-md-6"></div>
<div+style="margin-left:2px"+class="col-md-6"></div>|code-block|syntax|javascript|243277|完美工作|243278|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Using margin-left is the way to go:</p>

<pre><code>&lt;div style="margin-left:-2px" class="col-md-6"&gt;&lt;/div&gt;
&lt;div style="margin-left:2px" class="col-md-6"&gt;&lt;/div&gt;
</code></pre>

<p>works perfectly</p>


blocks|key|26451|text|使用最新的bootstrap版本，你可以使用“卡片”|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26452|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>With latest bootstrap version, you can use "cards"</p>


blocks|key|243322|text|创建一个类并使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|243323|边距:+1.5em+.5em；最大宽度:+calc(50%25+-1em)！重要；|243324|其中，max-width上的1em等于左/右边距相加。|243325|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>Create a class and use:</p>

<p>margin: 1.5em .5em;
max-width: calc(50% -  1em)!important;</p>

<p>Where 1em on the max-width is equal to the left/right margin added together. </p>


blocks|key|243336|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|243337|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;div class=&quot;row&quot;&gt;

  &lt;div class=&quot;col-sm-6&quot;&gt;
    &lt;div class=&quot;card&quot;&gt;
        Content one
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;col-sm-6&quot;&gt;
    &lt;div class=&quot;card&quot;&gt;
        Content two
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;
</code></pre>


blocks|key|26517|text|我不认为你可以单独使用Bootstrap来做到这一点。列之间的间距是自动添加/维护的。如果需要在列之间添加特定的宽度，可以使用此技巧来模拟空间：https://jsfiddle.net/loginet/3rogbh9s/5/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|26518|<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>|code-block|syntax|javascript|26519|和CSS|26520|.left-column+{
++++padding:+10px;
++++padding-right:+50px;
++++background:+white;
}

.right-column+{+
++++padding:+10px;
++++padding-left:+50px;+
++++background:+white;++
}|26521|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/loginet/3rogbh9s/5/^0|20|14|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>I don't think you can do this with Bootstrap alone. The space between columns is automatically added/maintained.
If you need to add a specific width between columns you can do this trick to simulate the space: <a href="https://jsfiddle.net/loginet/3rogbh9s/5/" rel="nofollow noreferrer">https://jsfiddle.net/loginet/3rogbh9s/5/</a></p>
<pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-6&quot;&gt;
        &lt;div class=&quot;left-column&quot;&gt;Left column&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-6&quot;&gt;
        &lt;div class=&quot;right-column&quot;&gt;Right column&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>and CSS</p>
<pre><code>.left-column {
    padding: 10px;
    padding-right: 50px;
    background: white;
}

.right-column { 
    padding: 10px;
    padding-left: 50px; 
    background: white;  
}
</code></pre>


<p>I have two columns:</p>
<pre><code>&lt;div class=&quot;col-md-6&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col-md-6&quot;&gt;&lt;/div&gt;
</code></pre>
<p>How can I add a space between them?</p>
<p>The output would simply be two columns right next to each other taking up the whole width of the page. Say the width was set to <code>1000px</code> then each div would be <code>500px</code> wide.</p>
<p>If I wanted a <code>100px</code> space between the two how could I achieve this automatically with Bootstrap: the <code>div</code>s sizes would become <code>450px</code> each to compensate for the spacing.</p>


How to add spacing between columns?

我有两个专栏：<div class="col-md-6"></div><div class="col-md-6"></div>我如何在它们之间添加一个空格？输出仅仅是两列紧邻在一起，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div都将是500px宽度。如果我想要在两者之间有一个100px空间，我如何使用...

问如何在列之间添加间距？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在列之间添加间距？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在列之间添加间距？
EN