使用bootstrap和php製作方形響應網格

我正在嘗試使用Bootstrap和PHP爲我的Omeka主題製作方形網格。我一直在嘗試製作一個類似瓦片的網格，其中3或4個項目在偶數行中，例如this example。但是，當我在我自己的代碼中嘗試這個時，它只是默認爲一個列。我已經嘗試了許多類的變體，似乎沒有任何工作。使用bootstrap和php製作方形響應網格

這裏的HTML：

<div class="container"> 
     <div class="item"> 
     <div class="row"> 
     <!-- attempt at square grid --> 
     <div class="col-md-3 col-sm-4 col-xs-6 item-item"> 
     <div class="dummy"></div> 
     <div class="thumbnail purple"> 
      Title: 
      <br> Description 
      <br> Another category 
      <br> 
     </div> 
     </div> 
     <div class="col-md-3 col-sm-4 col-xs-6 item-item"> 
     <div class="dummy"></div> 
     <div class="thumbnail purple"> 
      Title: 
      <br> Description 
      <br> Another category 
      <br> 
     </div> 
     </div> 
     <div class="col-md-3 col-sm-4 col-xs-6 item-item"> 
     <div class="dummy"></div> 
     <div class="thumbnail purple"> 
      Title: 
      <br> Description 
      <br> Another category 
      <br> 
     </div> 
     </div> 
     <div class="col-md-3 col-sm-4 col-xs-6 item-item"> 
     <div class="dummy"></div> 
     <div class="thumbnail purple"> 
      Title: 
      <br> Description 
      <br> Another category 
      <br> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
<!-- end grid -->

和CSS：

.dummy { 
margin-top: 100%; 
} 

.thumbnail { 
position: absolute; 
top: 15px; 
bottom: 0; 
left: 15px; 
right: 0; 
text-align: center; 
padding-top: calc(50% - 30px); 
} 

.item-item { 
border: solid black 5px; 
}

這裏的JS Fiddle。我怎樣才能使這個成爲一個網格甚至列和行？

來源

2016-01-20 hcgriggs

我加引導到你的小提琴和現在的工作，請點擊這裏。 https://jsfiddle.net/errhunter/3wym5nhw/5/ –

事情是這樣的：另一種必須使用JavaScript

CSS

.dummy { 
    margin-top: 100%; 
} 

.row { 
    display:flex; 
    flex-wrap:wrap; 
    justify-content:center; 
} 

.item-item { 
    flex:0 0 277px; 
    margin: 15px 0 0 1%; 
    text-align: center; 
    padding-top: calc(50% - 30px); 
    border: solid black 5px; 
}

https://jsfiddle.net/3wym5nhw/4/

來源

2016-01-20 05:52:04

<div class="container"> 
    <div class="item"> 

    <div class="row"> 
     <!-- attempt at square grid --> 
     <div class="col-md-6 col-sm-6 col-xs-6 item-item"> 
     <div class="dummy"></div> 
     <div class="thumbnail purple"> 
      Title: 
      <br> Description 
      <br> Another category 
      <br> 
     </div> 
     </div> 
     <div class="col-md-6 col-sm-6 col-xs-6 item-item"> 
     <div class="dummy"></div> 
     <div class="thumbnail purple"> 
      Title: 
      <br> Description 
      <br> Another category 
      <br> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6 col-sm-6 col-xs-6 item-item"> 
     <div class="dummy"></div> 
     <div class="thumbnail purple"> 
      Title: 
      <br> Description 
      <br> Another category 
      <br> 
     </div> 
     </div> 
     <div class="col-md-6 col-sm-6 col-xs-6 item-item"> 
     <div class="dummy"></div> 
     <div class="thumbnail purple"> 
      Title: 
      <br> Description 
      <br> Another category 
      <br> 
     </div> 
     </div> 
    </div> 


    </div> 
</div> 
<!-- end grid -->

使用兩行做一個2X2格

來源

2016-01-20 06:13:29 WisdmLabs

使用bootstrap和php製作方形響應網格

回答

相關問題