Css 如何使用bootstrap实现响应性三列盒式布局？

我正在使用以下方法为我的网站创建一个3栏布局：

<div>
    <div class="foo col-md-4">
    </div>
    <div class="foo col-md-4">
    </div>
    <div class="foo col-md-4">
    </div>
    <div class="foo col-md-4">
    </div>
</div>

添加上述内容后，将布局更改为两列布局

---

我的目标是复制响应性的盒式布局，就像我们在google plus中找到的一样。

不如添加插入边框

.foo
{
     border-color:transparent;
     border:inset 3px;
}

因为边距将计算为一列额外的宽度

不管怎样，如果你不想用边框把它们分开，那就用填充

.foo
{
     padding:3px 3px 3px 3px;
}

---

您的列应该已经被您的代码和引导的网格系统正确地隔开了，您只需要在底部添加一个边距来阻止它们接触

margin-bottom: 3px;

将其转换为2列时遇到的问题是，您还添加了3px的边距，这会将引导网格系统抛出

---

你不能使用填充（很好），因为引导使用它作为间隔，这将是得不偿失。

因为引导列已经有填充，你可以将列的内容装箱。。例如，

面板

会创建一种装箱效果。。不需要额外的CSS：

<div class="col-md-4">
   <div class="panel panel-default">
       <div class="panel-heading">Title</div>
       <div class="panel-body">Content here..</div>
   </div>
</div>

标题
内容在这里。。

Bootply上的演示：

此外，您可能对这个引导Google+项目感兴趣：

在列中放置一个div-*这可以完成

CSS

HTML

某物
某物
某物
某物
某物
某物
某物
某物
某物

您能提供一个JSFIDLE吗

<div class="col-md-4">
   <div class="panel panel-default">
       <div class="panel-heading">Title</div>
       <div class="panel-body">Content here..</div>
   </div>
</div>

body {background:#eee}

/* demo */
.container {padding:3%;}

/* put a div inside .foo style for demo */
.foo > div {
  background:#fff;
  margin-bottom:4px;
  padding:2%
}

/* adjust row margins */
.row.foo-row {
  margin-left: -2px;
  margin-right: -2px;
}
/* adjust padding */
.row.foo-row .col-sm-4, 
.row.foo-row .col-md-4, 
 .row.foo-row .col-lg-4 {
  padding-left: 2px;
  padding-right: 2px;
}

<div class="container">
<div class="row foo-row">
  <div class="foo col-md-4">
    <div>
      something
    </div>
  </div>

  <div class="foo col-md-4">
    <div>
      something
    </div>
  </div>

  <div class="foo col-md-4">
    <div>
      something
    </div>
  </div>

  <div class="foo col-md-4">
    <div>
      something
    </div>
  </div>

  <div class="foo col-md-4">
    <div>
      something
    </div>
  </div>

  <div class="foo col-md-4">
    <div>
      something
    </div>
  </div>

  <div class="foo col-md-4">
    <div>
      something
    </div>
  </div>

  <div class="foo col-md-4">
    <div>
      something
    </div>
  </div>

  <div class="foo col-md-4">
    <div>
      something
    </div>
  </div>
</div>
</div>