Javascript 当此值更改时，如何确保引导列扩展以适合其内容的宽度？

我有以下非常简单的引导网格系统：

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

我已将其包含在以下JSFIDLE中：

请将结果窗口向左展开，并确保通过http而不是https加载小提琴

我发现第一列的高度成功扩展，以满足Javascript代码中设置的jsme_容器的“var height”值。但是，当jsme_容器的宽度改变时，不会发生同样的情况。例如，当“var width=100px”时，内容位于第一列，但当该值更改为200px时，内容从第一列扩展到第二列。我的问题是，如何阻止这种情况发生，如何确保第一列（最终是所有列）扩展以适应其内容的宽度

我为这个问题的简单性道歉，但我对引导和CSS相当缺乏经验

---

如有任何帮助/提示，将不胜感激

您可以使用

Flexbox

，使所有儿童的宽度根据内容而变化：

.col-sm-2{边框：1px实心；}
@媒体屏幕和屏幕（最小宽度：480px）{
.flex{display:flex；flex wrap:wrap；}
.flex>.col-sm-2{flex:1；宽度：auto；}
}

方案
箭
复合物
箭
复合物
箭

在Bootstrap版本4.x中，您可以使用

col-sm-auto

我们可以使用

col-auto

，这样它就可以在所有设备中以相同的方式工作。这是一个很好的开始，但不会解决用户问题，因为其他现有列占据Bootstrap网格的10/12。在

col-*-auto

产生任何影响之前，用户可能还需要处理这些列。

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       

  }); 

}