Ich habe das folgende sehr einfache Bootstrap-Grid-System:

<div class="container-fluid">
  <div class="row">
     <div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">    
      <div id="jsme_container"> </div>   
    </div>
    <div class="col-sm-2"  style="border-style:solid; border-color:black; border-width:1px;">
        Arrow
    </div>
    <div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Compound</div>
    <div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Arrow</div>
    <div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Compound</div>
    <div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Arrow</div>
  </div>
</div>

Zur Zeit wird zu Testzwecken nur die erste Spalte mit Inhalt gefüllt. Hierbei handelt es sich um ein benutzerdefiniertes Zeichnungsobjekt, dessen Größe mit folgendem Javascript angegeben werden kann:

var width = "200px";
var height = "200px";

function jsmeOnLoad() {

  // width, height
  document.JME = new JSApplet.JSME("jsme_container", width, height, {

    "options": "edit,useopenchemlib", // depict in place of edit removes exterior editor window       

  }); 

}

Ich habe dies in die folgende JSFiddle aufgenommen:

http: //jsfiddle.net/mrc2016/rbxth6ac

Bitte erweitern Sie das Ergebnisfenster nach links und stellen Sie sicher, dass die Geige über http und nicht über https geladen wird.

Ich stelle fest, dass die Höhe der ersten Spalte erfolgreich erweitert wird, um den im Javascript-Code festgelegten Wert von "var height" des jsme_container zu erfüllen. Dasselbe passiert jedoch nicht, wenn die Breite des jsme_container geändert wird. Wenn beispielsweise "var width = 100px" festgelegt ist, befindet sich der Inhalt in der ersten Spalte. Wenn dieser Wert jedoch in 200px geändert wird, wird der Inhalt aus der ersten Spalte in die zweite Spalte erweitert. Meine Frage ist, wie kann ich dies verhindern und wie kann ich sicherstellen, dass die ersten (und letztendlich alle) Spalten entsprechend der Breite ihres Inhalts erweitert werden?

Ich entschuldige mich für die Vereinfachung dieser Frage, aber ich bin eher unerfahren mit Bootstrap und CSS.

Jede Hilfe / Tipps wäre sehr dankbar.