如何使用引導程序製作網格視圖

Question

我在網頁開發中有點新，我試圖通過引導提供的列和寬度來實現類似網格視圖的佈局，但我似乎無法計算出如何將每個項目的開始準確設置在項目之上。而且，我的項目還有一件事是動態的，所以我不知道它的高度是多少。

Answer 1

對於您想要的動態網格視圖可以通過名爲Salvattore的庫完成。它的腳本可以幫助您根據指定的列數組織HTML元素。例如：

HTML

<div class="container"> 
    <div class="row"> 
     <div id="board" data-columns> 
      <!-- Now here you can repeat these items with PHP --> 
      <div class="items"> 
       <!-- your content --> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.column{float:left;} 

@media screen and (max-width:480px){ 
    .column{float:none;position:relative;clear:both;} 
} 

.size-1of4{width:25%;} 
.size-1of3{width:33.333%;} 
.size-1of2{width:50%;} 
#board[data-columns]::before{content:'4 .column.size-1of4';} 

/*--Configure salvattore with media queries--*/ 

@media screen and (max-width:450px){ 
    #board[data-columns]::before{content:'1 .column';} 
} 
@media screen and (min-width:451px) and (max-width:700px){ 
    #board[data-columns]::before{content:'2 .column.size-1of2';} 
} 
@media screen and (min-width:701px) and (max-width:850px){ 
    #board[data-columns]::before{content:'3 .column.size-1of3';} 
} 
@media screen and (min-width:851px){ 
    #board[data-columns]::before{content:'4 .column.size-1of4';} 
} 

上面的代碼將產生4列見下文圖像。

也不要忘記使用salvattore精縮JS .. :)

Answer 2

嘗試類似：

<div class="container"> 
    <div class="col-md-4">First</div> 
<div class="col-md-4">Second</div> 
<div class="col-md-4">Third</div> 
</div> 

這會給你3列。還請檢查引導文檔here

Answer 3

使用CSS - 使用顯示錶和表芯。

body{ 
 
    background: #dedede; 
 
} 
 
.row{ 
 
    display:table; 
 
    margin: 0 -10px 0; 
 
    border-collapse:separate; 
 
    border-spacing: 20px 10px; /*use border-spacing instead of margins*/ 
 
} 
 
.col-sm-4{ 
 
    display: table-cell; 
 
    padding: 10px 20px; 
 
    background: #f1f1f1; 
 
    box-shadow 0 0 5px 0 rgba(0,0,0,0.5); 
 
    float:none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-sm-4"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
    </div> 
 
</div> 
 
</div>

另外，

隨着JS 您可以使用匹配身高其基於jQuery插件。

http://brm.io/jquery-match-height/