如何用bootstrap在两列之间给出边距

Question

我想在Bootstrap中的两列之间放置一个margin 10px。我有2 div s，左边一个，右边一个。

电流：

目标：

代码：

<div class="row">
   <div class="shadow col-md-9">
       Content
   </div>
   <div class="shadow col-md-3">
       Content      
   </div>
</div> 

*影子类给出边框颜色。

Answer 1

<div class="container">
<div class="row">
   <div class="col-md-9">
<div class="row">
<div class="col-md-11 shadow">left div</div>
</div>
    </div>
    <div class="col-md-3">
<div class="row">
<div class="col-md-12 shadow">right div</div>
</div>
    </div>
</div>
</div>

这是快速版本。实际上，您可以添加任何类来代替col-md-11/12。见http://www.bootply.com/EdpTvNuKW5。因为它嵌套在内部，所以它将保持父对象的响应实用程序的属性。

Answer 2

<div class="row"> 
<div class="shadow col-md-9"> left div  </div> 
<div class="col-md-3"> 
<div class="shadow">right div</div> 
</div> 
</div>

Answer 3

我会在列中使用媒体查询和内部div，你想要10px的余量。

DEMO：http://jsbin.com/ripiz/1/

HTML

<div class="container">
 <div class="row">
  <div class="col-md-9 primary">
   Content
  </div>
  <div class="col-md-3 sidebar">
   <div class="inner">
    Side
   </div>
  </div>
 </div>
</div>
</div>

CSS

.primary,
.sidebar {
    border: 1px solid #777; /* your .shadow classes go here */
    font-size: 150%; /* demo only */
}

@media (min-width:992px) { 
    .sidebar {
        padding-left: 10px;
        border: 0px; /* remove shadow classes here */
    }

    .sidebar .inner {
        border: 1px solid #777;  /* add shadow classes here */
        padding-left: 15px;
        padding-right: 15px;
    }
}