Twitter bootstrap 如何让flex项根据文本长度进行拉伸（并让第二个项填充div的其余部分）？

以下夹点基于colmun编号拉伸：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">left</div>
    <div class="col-xs-6">right</div>
  </div>

  <div class="row">
    <div class="col-sm-6">left</div>
    <div class="col-sm-6">right</div>
  </div>
  <!-- etc -->  
</div>

左边
正确的
左边
正确的

---

如何做到这一点，我有两个弹性项：一个根据文本宽度拉伸，另一个水平填充div的其余部分？

使用

col auto

根据文本宽度拉伸，使用

col

水平填充div的其余部分

<div class="container-fluid">
  <div class="row">
    <div class="col-auto">This will stretches based on the width of the text</div>
    <div class="col">This will fills the rest of the div horizontally</div>
  </div>
</div>

这将根据文本的宽度进行拉伸
这将水平填充div的其余部分

这是一本书