使用 bootstrap 和 php 制作正方形响应式网格

Question

我正在尝试用 Bootstrap 和 PHP 为我的 Omeka 主题制作一个正方形网格。我一直在尝试制作一个类似瓷砖的网格，在偶数行中有 3 或 4 个项目，就像 this example 中那样。但是，当我在自己的代码中尝试这样做时，它只是默认为单个列。我已经尝试了一些 class 变体，但似乎没有任何效果。

这是 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。我怎样才能把它变成一个具有偶数列和行的网格？

Answer 1

类似这样：另一个必须使用 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/

Answer 2

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

使用 bootstrap 和 php 制作正方形响应式网格

Making a square responsive grid with bootstrap and php

html

css

php

twitter-bootstrap

omeka