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

我使用下面创建一个3列布局觉得我的网站：如何使用bootstrap实现响应三列盒装布局？

<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 
{ 
    margin: 3px 3px 3px 3px; 
}

添加上面的内容，改变布局变成了两列布局。

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

来源

2013-11-24 RWendi

你能提供的jsfiddle – Juan

如何添加插图边界，而不是

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

因为保证金将被列特宽幅

无论如何，如果你想它们分开，而无需使用国界计算，则只需用填充

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

来源

2013-11-24 02:08:42 ProllyGeek

您的专栏应该已经通过您的代码和引导程序的网格系统正确隔开了，您只需要在底部添加一个页边距以停止t下摆接触。

margin-bottom: 3px;

您有相关转换成2列中的问题是，因为你添加3PX的侧缘，以及，其中自举抛出网格系统进行。

你不能使用填充（井），因为引导使用它的间距，这将比收益更痛苦。

来源

2013-11-24 02:25:17 jsrgnt

由于引导的cols已经有填充，你可以让你的列盒装。例如内容的panel创建一个方盒子的效果..不需要额外的CSS：上Bootply

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

演示： http://bootply.com/96277

此外，你可能会在这个引导Google+项目的兴趣： http://iatek.github.io/bootstrap-google-plus/

来源

2013-11-24 14:37:46 ZimSystem

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>

来源

2013-11-27 13:46:58 Christina

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

回答

相关问题