Javascript 从js.plotly创建的svg容器

当我缩小铬合金的尺寸时，它们会重叠。这是我的html。我拿的是id=pie和id=gauge。它们在一个row类中，并且都是col-md-5，所以它们不应该重叠，但是为什么。。。？饼图变大，其图例显示在仪表图顶部

<div class="row">
      <div class="col-md-2">
        <div class="well">
          <h5>SELECT Sample:</h5>
          <select id="selDataset" onchange="optionChanged(this.value)"></select>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">Sample MetaData</h3>
          </div>
          <div id="sample-metadata" class="panel-body"></div>
        </div>
      </div>

      <div class="col-md-5">
        <div id="pie"></div>
      </div>

      <div class="col-md-5">
        <div id="gauge"></div>
      </div>

    </div>
  </div>
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-10">
      <div id="bubble"></div>
    </div>

function piechart(alldata){
  var values = alldata.sample_values.slice(0,10);
  var labels = alldata.otu_ids.slice(0,10);
  var hover_text = alldata.otu_labels.slice(0,10);
  var trace = {
    "values":values,
    "labels":labels,
    "hovertext":hover_text,
    "type":"pie"
  };
  var data = [trace];
  var loc_plot = document.getElementById("pie");
  Plotly.newPlot(loc_plot, data);
};

function bubblechart(data){
  var x = data.out_ids;
  var y = data.sample_values;
  var markersize = data.sample_values;
  var markercolors = data.otu_ids;
  var textvalues = data.otu_labels;
  console.log(markercolors);
  var trace = {
    "x": x,
    "y":y,
    text:textvalues,
    mode: "markers",
    marker:{
      size:markersize,
      color:markercolors
    }
  };
  var layout = {
    title:"Bubble Chart",
    xaxis: {title:"OTU ID"},
    showlegend:true
  };
  var data = [trace];
  var plot_loc = document.getElementById("bubble");
  Plotly.newPlot(plot_loc, data, layout);
};