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

Question

我有一个网页，使用 Chartist 在一行中显示 4 个条形图。我正在尝试使用 Bootstrap 的响应式解决方案来显示 4 个图表，一个在另一个下方，但是当我访问 [=24] 上的页面时，图表 div 的高度越来越长=] 6. 奇怪的是，当我修改 Chrome 浏览器的 windows 大小时，效果非常好。

这是我的网站：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>

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

A responsive div is getting way to long height using bootstrap

css

jquery

media-queries

twitter-bootstrap

chartist.js

将您的 html 更改为

您还可以进一步改进它，