如何讓基於文本長度拉伸的flex項目（並有第二個填充div的其餘部分）？

Question

下面的把手抻基礎上，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> 

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

如何做到這一點，所以我有2個柔性項目：綿延基於文本的寬度，一個又一個，填補了水平的其餘部分？

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。