jquery - 响应式 div 正在使用 bootstrap 达到长高度

Question

我有一个网页，使用 Chartist 在一行中显示 4 个条形图。我正在尝试使用 Bootstrap 的响应式解决方案来显示 4 个图表，一个在另一个下方，但是当我访问我的 iphone 6 上的页面时，图表 div 的高度越来越长。奇怪的是，当我修改 Chrome 的窗口大小时浏览器，就像一个魅力。

这是我的网站:http://clipping.primerahora.cl/

这是有问题的 html 部分:

<div class="container">
    <div class="row">
            <div style="display:table; margin:0 auto;">
                <div id="chart-01" class="col-md-3 ct-chart01 d1" style="display:table; margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Tipo de Prensa</div>
                <div id="chart-02" class="col-md-3 ct-chart02 d1" style="display:table; margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Medios mas vistos</div>
                <div id="chart-03" class="col-md-3 ct-chart03 d1" style="display:table; margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Regiones</div>
                <div id="chart-04" class="col-md-3 ct-chart04 d1" style="display:table; margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Productos</div>   
            </div>
        </div>
</div>

我尝试使用一些媒体查询，但不幸的是:

@media screen and (min-width: 1024px) {
.d1{
    max-height:50%;
    height:50%;
  }
}      

@media screen and (max-width: 800px) {
.d1{
    max-height:50%;
    height:50%;
   }
}

@media screen and (max-width: 600px) {
.d1{
    max-height:50%;
    height:50%;
   }
}

Answer 1

将您的 html 更改为，

<div class="container">
    <div class="row">
         <div id="chart-01" class="col-md-3 ct-chart01 d1" style="margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Tipo de Prensa</div>
         <div id="chart-02" class="col-md-3 ct-chart02 d1" style="margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Medios mas vistos</div>
         <div id="chart-03" class="col-md-3 ct-chart03 d1" style="margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Regiones</div>
         <div id="chart-04" class="col-md-3 ct-chart04 d1" style="margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Productos</div>   
    </div>
</div>

您还可以进一步改进它，

CSS，

.d1 {
   height: 175px;
}

.chart-wrapper {
   height:100%;
   background-color: white;
   font-family: arial; font-stretch: condensed;
   text-align: center;
}

HTML,

<div class="container">
    <div class="row">
         <div class="col-md-3 d1"><div id="chart-01" class="chart-wrapper ct-chart01">Tipo de Prensa</div></div>
         <div class="col-md-3 d1"><div id="chart-02" class="chart-wrapper ct-chart02">Medios mas vistos</div></div>
         <div class="col-md-3 d1"><div id="chart-03" class="chart-wrapper ct-chart03">Regiones</div></div>
         <div class="col-md-3 d1"><div id="chart-04" class="chart-wrapper ct-chart04">Productos</div></div>   
    </div>
</div>