javascript - 当此值更改时，如何确保 Bootstrap 列扩展以适应其内容的宽度？

Question

我有以下非常简单的 Bootstrap 网格系统:

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

目前出于测试目的，只有第一列填充了内容 - 这是一个自定义绘图对象，其大小可以使用以下 Javascript 指定:

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       

  }); 

}

我已将其包含在以下 JSFiddle 中:

http://jsfiddle.net/mrc2016/rbxth6ac/

请将结果窗口向左展开，并确保 fiddle 是通过 http 而不是 https 加载的。

我发现第一列的高度成功扩展，以满足 Javascript 代码中设置的 jsme_container 的“var height”值。但是，更改 jsme_container 的宽度时不会发生同样的情况。例如，当“var width = 100px”时，内容位于第一列，但当此值更改为 200px 时，内容扩展到第一列之外并进入第二列。我的问题是，我怎样才能阻止这种情况发生，我怎样才能确保第一个(最后是所有)列展开以适应其内容的宽度？

对于这个问题的简单性，我深表歉意，但我对 Bootstrap 和 CSS 相当缺乏经验。

任何帮助/提示将不胜感激。

Answer 1

在 Bootstrap 4.x 版本中，您可以使用 col-sm-auto。