更改此值后，如何确保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/

请在左侧扩展结果窗口，并确保小提琴通过http而非https加载。

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

对于这个问题的简单性，我深表歉意，但是我对Bootstrap和CSS经验不足。

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

Answer 1

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

Answer 2

您可以使用Flexbox它，使所有子项的宽度根据内容而变化：

.col-sm-2 { border:1px solid; }

@media screen and (min-width: 480px) {
  .flex { display: flex; flex-wrap: wrap; }
  .flex > .col-sm-2 { flex: 1; width: auto; }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h2> RScheme </h2>
<div class="container-fluid">
  <div class="row flex">
    <div class="col-sm-2"><img src="http://placehold.it/200x200"></div>
    <div class="col-sm-2">Arrow</div>
    <div class="col-sm-2">Compound</div>
    <div class="col-sm-2">Arrow</div>
    <div class="col-sm-2">Compound</div>
    <div class="col-sm-2">Arrow</div>
  </div>
</div>

jsFiddle： http: //jsfiddle.net/rbxth6ac/8/