如何修复响应错误

Question

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

Fiddle

我正在使用bootstrap 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，所以当你重新调整为＆＃34;正常＆＃34;查看它没有为普通视图找到@media，也没有覆盖任何规则。 你应该这样做：

＆＃13;

＆＃13;

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;}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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插件名称，我可以告诉你更多。