Bootstrap4 可变宽度

使用col-{breakpoint}-auto类可以根据内容调整列的大小。

如：

<div class="container">
  <p>可变宽度内容，使用col-{breakpoint}-auto，可使其根据内容的宽度调整列的大小</p>
  <div class="row justify-content-md-center">
  	<div class="col col-lg-2">1 of 3</div>
  	<div class="col-md-auto">2 of 3(可变宽度)</div>
  	<div class="col col-lg-2">3 of 3</div>
  </div>
  <div class="row">
  	<div class="col">1 of 3</div>
  	<div class="col-md-auto">2 of 3(可变宽度)</div>
  	<div class="col col-lg-2">3 of 3</div>
  </div>
</div>

col-md-auto样式定义：

.col-md-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}