如何使用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實現響應三列盒裝佈局？

回答

相關問題