Html 将一块引导COL与末端的一个短项目居中

假设我有这样一个引导块：

<div class='my_row'>
   <div class='row'>
      <div class='col-sm-4'>Something long</div>
      <div class='col-sm-4'>Something else</div>
      <div class='col-sm-4'>Hi</div>
   </div>
</div>

假设我已经正确地编写了css（即时制作），这在技术上是可行的：我将得到一行3个项目，正确地位于页面的中心。但是，即使最外层的div居中，最右边的col-sm-4中的少量内容也会使整个内容看起来有点偏左。（在编码时，我并不总是知道不同div中有多少文本，所以我不能欺骗并将最后一个div设置为col-sm-2或类似的值。）

---

如果我能让col-sm-4在布局上像col-sm-4一样，但自动将其大小调整到内容的大小，然后将其反馈到.row，这样我就能更接近视觉中心。这可能吗？我可能会打破引导并手工编码，但我更喜欢保留引导，因为其他所有明显的原因。谢谢

如果您使用的是bootstrap 4，那么您可以在不使用任何自定义css的情况下使用如下内容：

<div class='my_row'>
   <div class='row justify-content-center'>
      <div class='col-auto'>Something long</div>
      <div class='col-sm-4'>Something else</div> <!-- The column whose content will most likely fit into this size. Not necessarily in the center. -->
      <div class='col-auto'>Hi</div>
   </div>
</div>

长的东西
别的
你好

这样，所有行将只占用所需的空间，并且仍然是集中的

这里的关键是只给其中一列预定义的大小限制。在我的例子中，是中心元素（这样左、右元素就可以获得尽可能多的增长机会）

---

这个解决方案的优点在于，它很好地包装了最后一行，如果它太大而无法放在同一行上，它仍然会与其他行集中在一起。

如果您使用的是bootstrap 4，您可以在不使用任何自定义css的情况下使用类似的内容：

<div class='my_row'>
   <div class='row justify-content-center'>
      <div class='col-auto'>Something long</div>
      <div class='col-sm-4'>Something else</div> <!-- The column whose content will most likely fit into this size. Not necessarily in the center. -->
      <div class='col-auto'>Hi</div>
   </div>
</div>

长的东西
别的
你好

这样，所有行将只占用所需的空间，并且仍然是集中的

这里的关键是只给其中一列预定义的大小限制。在我的例子中，是中心元素（这样左、右元素就可以获得尽可能多的增长机会）

---

这个解决方案的优点在于，它很好地包装了最后一行，如果它太大而无法放在同一行上，它仍然会与其他行集中在一起。

谢谢！看起来是时候升级到Bootstrap 4了…：）谢谢看起来是时候升级到Bootstrap 4了…：）