Question

我正在尝试使用Bootstrap和PHP制作一个方形网格，用于我的Omeka主题。我一直试图制作一个类似于瓷砖的网格，在this example中的偶数行中有3个或4个项目。但是，当我在自己的代码中尝试这个时，它只是默认为一个列。我尝试了很多课程变化，似乎没什么用。

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

-DCMAKE_CXX_FLAGS=-std=c++11:c++14

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制作方形响应网格

2 个答案: