如何使用基于文本长度拉伸的弹性项目（并且第二个填充div的其余部分）？

Question

以下夹具根据结肠编号伸展：

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

https://codepen.io/joe-watkins/pen/bdPPdx

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

Answer 1

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

这是working fiddle。