如何修复响应错误

Question

问题是，当我将窗口大小调整为小尺寸（移动）时，它看起来不错，但是当我将其恢复为大尺寸时，画布会延伸到其父列之外。

Fiddle

我正在使用引导程序 3.3。 但我不得不说，其他盒子没问题，它不会出盒子期待这张图

    .ibox-title {
      -moz-border-bottom-colors: none;
      -moz-border-left-colors: none;
      -moz-border-right-colors: none;
      -moz-border-top-colors: none;
      background-color: #ffffff;
      border-color: #e7eaec;
      border-image: none;
      border-style: solid solid none;
      border-width: 4px 0px 0;
      color: inherit;
      margin-bottom: 0;
      padding: 14px 15px 7px;
      height: 48px;
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
    }
    .ibox-content {
      background-color: #ffffff;
      color: inherit;
      padding: 15px 20px 20px 20px;
      border-color: #e7eaec;
      border-image: none;
      border-style: solid solid none;
      border-width: 1px 0px;
      border-bottom-left-radius: 9px;
      border-bottom-right-radius: 9px;
    }
    canvas {
      background: pink;
    }

<div class="row">
  <div class="col-lg-6">
    <div class="ibox float-e-margins">

      <div class="ibox-content" style="border-radius: 10px;">
        <div>
          <h3 class="font-bold no-margins">
                               Statistics Graph
                            </h3>
        </div>

        <div class="m-t-sm">
          <div class="row">
            <div class="col-md-12">
              <div>
                <canvas id="lineChart" height="114"></canvas>
              </div>
            </div>
          </div>

        </div>
        <div class="m-t-md">
          <small class="pull-right">
                                        <i class="fa fa-clock-o"> </i>
                                        Update on 16.07.2015
                                    </small>
          <small>
                                       <strong>Analysis of sales:</strong> The value has been changed over time,sdasdas as been changed over time,sdasdas
                                   </small>
        </div>
      </div>
    </div>
  </div>

Answer 1

您可能只为移动设备设置了@media，因此当您将大小调整回“正常”视图时，它不会找到用于正常视图的@media，并且不会覆盖任何规则。 你应该这样做：

div.try {width:400px;border:1px solid #000;height:300px;}
@media (max-width:400px) {
  div.try {width:150px;}
}

@media (min-width:401px) {
  div.try {width:400px;}
}

<div class="try"></div>

Answer 2

Canvas 没有动态调整大小，因此您可以尝试：

canvas {
    width: 100%;
    height: auto;
}

canvas {
    width: 100%;
    height: auto;
}
.ibox-title {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 4px 0px 0;
  color: inherit;
  margin-bottom: 0;
  padding: 14px 15px 7px;
  height: 48px;
  border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0px;

    border-bottom-left-radius: 9px;
 border-bottom-right-radius: 9px;
}

<div class="row">
    <div class="col-lg-6">
        <div class="ibox float-e-margins">
            <div class="ibox-content" style="border-radius: 10px;">
                <div>
                     <h3 class="font-bold no-margins">
                           Statistics Graph
                        </h3>

                </div>
                <div class="m-t-sm">
                    <div class="row">
                        <div class="col-md-12">
                            <div>
                                <canvas class="img-responsive" id="lineChart" height="114"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m-t-md"> <small class="pull-right">
                                    <i class="fa fa-clock-o"> </i>
                                    Update on 16.07.2015
                                </small>
 <small>
                                   <strong>Analysis of sales:</strong> The value has been changed over time,sdasdas as been changed over time,sdasdas
                               </small>

                </div>
            </div>
        </div>
    </div>

Answer 3

实际上，问题是当页面加载时，正在创建具有特定高度和宽度的图形，但在调整窗口大小时没有这样的选项。所以，我们必须在 $(window).resize() 函数上调用 redraw() 或 draw()。

注意：Draw() 和 redraw() 函数取决于您使用的图表库。首先，检查哪个函数要重新创建图表，然后调用它。 但是，大多数图表库都有重绘功能。

如果提到图表的 jquery 插件名称，我可以告诉你更多信息。