如何使面板高度达到正方形,面板的宽度为50%?

时间:2016-05-17 16:09:17

标签: html css twitter-bootstrap

如何使用bootstrap panels制作4个完美的正方形?

width是正确的,但是如果我将高度设置为50%则没有任何反应。我不想用150px手动设置高度,例如因为根据屏幕尺寸,高度需要流畅地增大/缩小以匹配width

enter image description here

查看

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

CSS

.panel-default {
    border-style: none;
    border: none;
    width: 49.5%;
    height: 49.5%;
    display: inline-block;
}

.panel-body {
    background-color: #446CB3;
    color: white;
    height: 50%;
    padding-top: 19%;
}

0 个答案:

没有答案