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

I have the following very simple Bootstrap grid system:

我有以下非常简单的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>

Currently for testing purposes, only the first column is filled with content - which is a custom drawing object the size of which can be specified using the following Javascript:

目前,出于测试目的,只有第一列填充了内容 - 这是一个自定义绘图对象,其大小可以使用以下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       

  }); 

}

I have included this in the following JSFiddle:

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

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

Please expand the result window to the left and ensure the fiddle is loaded over http not https.

请将结果窗口展开到左侧,确保通过http而不是https加载小提琴。

I find that the height of the first column expands successfully to meet the value of "var height" of the jsme_container as set in the Javascript code. However, the same does not happen when the width of the jsme_container is changed. For example, when "var width = 100px", the contents sit within the first column, but when this value is changed to 200px, the contents expand out of the first column and into the second. My question is, how can I stop this from happening and how can I ensure the first (and ultimately all) columns expand to fit the width of their contents?

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

I apologise for the simplistic nature of this question but I am rather inexperienced with Bootstrap and CSS.

我为这个问题的简单性而道歉,但我对Bootstrap和CSS缺乏经验。

Any help/tips would be much appreciated.

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

2 个解决方案

#1

You can use Flexbox for that, making all children's width change depending on content:

您可以使用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/

#2

In Bootstrap version 4.x, you can use col-sm-auto.

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

#1