响应式 div 正在使用引导程序达到长高度

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>