javascript - 使用具有多边形形状的 Bootstrap 网格创建布局

Question

我正在尝试使用多边形形状的 Bootstrap 网格创建布局，但不知何故布局高度不匹配，我尝试使用 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

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

HTML

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

jQuery

$('.col-md-25').height( Math.round( $('.col-md-25').width() ) * Math.tan(0.523599) );

$('.row').css('transform', 'skewY(-25deg)');