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-sm-4的行为类似于col-sm-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>

这样，所有行将仅占用所需的空间，并且仍处于集中状态。

此处的关键是仅给一列预定义大小限制。在我的情况下，中心元素（以便使左右元素有机会尽可能多地增长。）

此解决方案很好的地方是很好地包装了最后一行，并且如果它太大而无法容纳在同一行上，则仍将其与其他行集中在一起。

将一段Bootstrap列居中居中，最后放一个短项

1 个答案: