如何在三列布局中保持可变宽度列居中？

Question

我有一个类似工具栏的控件。在左侧，可变大小的文本。在中间，一小块文字。在右侧，更多文字。

我希望中心文本始终居中，并且只占用它需要的空间。左右应展开以填充可用空间，然后换行。

我尝试过的任何方法都不起作用。以下是我的尝试：

 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<br/>
not centered:
<div class="d-flex justify-content-between">
   <div class="border">
  left left left left left left left left left left left left
   </div>
   <div class="border">
  center
   </div>
   <div class="border">
  right
   </div>
</div>
<br/>
not on the same line:
<div class="d-flex flex-column">
   <div class="border align-self-start">
  left left left left left left left left left left left left
   </div>
   <div class="border align-self-center">
  center
   </div>
   <div class="border align-self-end">
  right
   </div>
</div>
<br/>
left does not fill space up to the center content:
<div class="container row">
   <div class="col border">
  left left left left left left left left left left left left
   </div>
   <div class="col border text-center">
  center
   </div>
   <div class="col border text-right">
  right
   </div>
</div>

运行 sn-p 看看我的意思。如何使居中的文本居中？ （可惜我事先不知道它的宽度。）

Answer 1

左边是可变大小的文本。

在中间，一小块文字，占据了它需要的空间

右侧，更多文字。

左右应该展开以填充可用空间，然后换行。

这是你所期待的吗？

使用col-auto 类来占用可用空间。 如果左侧应该采用相同的宽度并且文本应该换行，您可以使用 col-4 或 col-3 类预定义。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
   <div class="border col">
  left left left left left left left left left left left left
   </div>
   <div class="border col-auto">
  center
   </div>
   <div class="border col">
  right
   </div>
</div>