使Bootstrap cols块居中，并在末尾放置一个短项目

Question

假设我有一个Bootstrap块，如下所示：

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

.my_row {
   width: 80%;
   margin: 0 auto;
}

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

如果我能让col 4在布局方面表现得像col 4那样，并且自动将它们的大小调整到内容的大小，然后将其反馈回.row，这样我就能更接近于视觉中心，那就太好了。这个是可能的吗？我可能会从Bootstrap中解脱出来，并手工编写所有代码，但出于所有其他显而易见的原因，我更喜欢使用Bootstrap。谢谢!

Answer 1

如果你使用的是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>

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

这里的关键是只给其中一列预定义的大小限制。在我的例子中是center元素(这样left和right元素就有机会尽可能地增长)。

这个解决方案很好的地方是，很好地包装了最后一行，如果它太大，不能放在同一行中，它仍然与其他行一起居中。