Question

我正在使用以下内容为我的网站创建一个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>

以上效果很好，无论我添加了多少foo项，它都会自动将其格式化为三列布局。但是，我想为每个foo项添加一个盒装的感觉，这样它们看起来并不像是彼此相连。为实现这一目标，我在foo类中增加了保证金：

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

添加上面的内容，更改布局成为两列布局。

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

Answer 1

由于Bootstrap cols已经有了填充，你可以将列的内容装箱。例如，panel会创建一个盒装效果..不需要额外的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上的演示：http://bootply.com/96277

此外，您可能对此Bootstrap Google+项目感兴趣： http://iatek.github.io/bootstrap-google-plus/

Answer 2

http://jsbin.com/akaQufU/3

将一个div放在col- *中，这可以完成。

CSS

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;
}

HTML

<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>

Answer 3

如何添加内嵌边框

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

因为保证金将计算为列额外宽度

无论如何，如果你想在不使用边框的情况下将它们分开，那么只需使用填充

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

Answer 4

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

margin-bottom: 3px;

转换为2列时遇到的问题是因为你添加了3px的边缘，这会引发bootstraps网格系统。

你不能使用填充（well），因为bootstrap将它用于间距，这将比获得更痛苦。

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

4 个答案: