如何使用引导程序在两列之间提供边距答案

【问题标题】：how can i give margin between two column with bootstrap如何使用引导程序在两列之间提供边距
【发布时间】：2014-10-11 23:04:11
【问题描述】：

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

当前：

目标：

代码：

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

*shadow 类赋予边框颜色。

【问题讨论】：

我通常嵌套在一列中以实现该效果。
你能给我举个例子吗？
我回答了这个问题，在未来，正确的标签是 twitter-bootstrap 或 twitter-bootstrap-3，而不是 bootstrap

标签： twitter-bootstrap-3 grid margin

【解决方案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。因为它嵌套在内部，所以它会保留与响应式实用程序相关的父级属性。

【讨论】：

如前所述，您可以将课程更改为您想要的任何内容。命名一个类（而不是col-md-11）类似于ten，然后使用.ten{margin-right:10px;} 。 bootply.com/m6dKE64g0D

【解决方案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>

【讨论】：

【解决方案3】：

我会在你想要 10px 边距的列内使用媒体查询和内部 div。

演示：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;
    }
}

【讨论】：