使用具有多边形形状的引导网格创建布局

Question

我正在尝试使用多边形形状的引导网格创建布局但不知何故布局高度不匹配，我尝试使用JS匹配高度但是无法得到它，可能是有人想知道以其他方式做到这一点，请帮忙！

以下是我尝试实现的示例，请注意每列都会有悬停效果，并且默认情况下显示的形状与

相同

这是JSfiddle demo

CSS

<style>
  .main-wrapper{float:left; width:100%; background:#cccccc;}
  .col-md-3{border: 1px solid black;}
  .overflowH{overflow: hidden;} 
</style>

HTML

<div class="container-fluid">
  <div class="row fullH overflowH">
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
   </div>
 </div>
</div>

的jQuery

//Resize div height to viewport size
function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.fullH').css('height', windowHeight);
};
setHeight();
$(window).resize(function() {
    setHeight();
});
//Rotated box
$('.col-md-3').height( Math.round( $('.col-md-3').width() ) * Math.tan(0.523599) );
$('.col-md-3').css('transform', 'skewY(-30deg)');

Answer 1

正如上面提到的@Brett Gregson旋转行而不是列应该是个好主意，检查下面的代码，我已经创建了自定义col而不是bootstrap，所以你只需要为它编写媒体查询以使其在响应中工作。

以下是代码：

<强> CSS

JAVA_HOME

<强> HTML

.col-md-25{border: 1px solid black; width:20%; float:left;}

<强>的jQuery

<div class="container-fluid">
 <div class="row" style="margin-top:-465px;">
    <div class="col-md-25"></div>
    <div class="col-md-25"></div>
    <div class="col-md-25"></div>
    <div class="col-md-25"></div>
    <div class="col-md-25"></div>
  </div>
 <div class="row">
    <div class="col-md-25">Text Here 1</div>
    <div class="col-md-25">Text Here 2</div>
    <div class="col-md-25">Text Here 3</div>
    <div class="col-md-25">Text Here 4</div>
    <div class="col-md-25">Text Here 5</div>
 </div>  
 <div class="row">
    <div class="col-md-25">Text Here 1</div>
    <div class="col-md-25">Text Here 2</div>
    <div class="col-md-25">Text Here 3</div>
    <div class="col-md-25">Text Here 4</div>
    <div class="col-md-25">Text Here 5</div>
 </div>  
 <div class="row">
    <div class="col-md-25">Text Here 1</div>
    <div class="col-md-25">Text Here 2</div>
    <div class="col-md-25">Text Here 3</div>
    <div class="col-md-25">Text Here 4</div>
    <div class="col-md-25">Text Here 5</div>
 </div>
 </div>