Html 如何在bootstrap流体容器内均匀分布一组相同宽度的盒子？

如何在流体容器内均匀分布一组相同宽度的盒子

我有以下资料：

<div class="fluid-container">
  <span>some text</span>
  <span>some text2</span>
  ...
  <span>some textN</span>
</div>

我希望实现这样一种效果，即在蓝色流体容器内，每个包含给定文本的粉红色框的宽度始终相同的情况下，间距均匀的框：

我试着把盒子放在里面，但是我在下一行中一个接一个地把它们放在一起，没有最佳地利用横向空间：

如果我在文本中没有使用任何类似于我使用的跨距的内容，则流体容器会发挥作用，但文本的间距不均匀。在这种情况下，黄色框是未使用任何标记包装的文本：

我应该使用什么类/css代码来组织和包装文本，使其产生相同宽度的框？盒子的数量不详

Bootstrap包括一个响应迅速的移动式first fluid grid系统 根据设备或视口的大小适当地缩放到12列 增加。它包括用于轻松布局选项的预定义类，如 以及用于生成更多语义布局的强大混合

---

我不完全清楚为什么要特别使用“流体网格”。除非你不希望它在移动设备上折叠成一排

<div class="row">
  <div class="col-xs-6 col-md-4">col 1</div>
  <div class="col-xs-6 col-md-4">col 2</div>
  <div class="col-xs-6 col-md-4">.col 3</div>
</div>

---

如果您想在没有任何框架的情况下实现这一点，可以使用Flexbox

.液体容器{ 显示器：flex； 背景：5B9BD5； 柔性包装：包装； 填充：20px； } 跨度{ 弹性：0.0 calc33.33%-20px； 背景：F8CBAD； 最小高度：50px； 利润率：10px； } @媒体最大宽度：768px{ 跨度{ 弹性：0.0 calc100%-20 px； } } 有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本有些文本

---

你想使用引导还是不使用引导？你没有阅读引导文档吗？…我不确定你的要求是什么。你有没有努力阅读文档？没有液体容器。对列使用行和列-*。有点像感谢jbutler483，基本上就是这样！

<div class="row">
  <div class="col-xs-6 col-md-4">col 1</div>
  <div class="col-xs-6 col-md-4">col 2</div>
  <div class="col-xs-6 col-md-4">.col 3</div>
</div>