如何在引导液容器内均匀分布一组相同宽度的盒子？

Question

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

我有以下内容：

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

我希望实现这种非常均匀间隔的结果，其中每个包含给定文本的粉红色框在蓝色流体容器内的宽度始终相同：

我尝试在其中设置框，但后来我在下一行中逐个获取它们，而不是最佳地使用横向空间：

如果我不在文本中使用任何东西（比如我使用的范围），那么流体容器就会发挥作用，但文本间隔不均匀（在这种情况下，黄色框是未包装的文本任何标签）：

我应该使用什么类/ css代码来组织和包装文本，以便产生相同的宽度框？盒子的数量是未知的。

Answer 1

http://getbootstrap.com/css/#grid

  

Bootstrap包括一个响应式移动第一流体网格系统   适当缩放最多12列作为设备或视口大小   增加。它包括用于简单布局选项的预定义类，如   以及用于生成更多语义布局的强大混合。

<div class="row">
  <div class="col-md-4">text</div>
  <div class="col-md-4">text</div>
  <div class="col-md-4">text</div>
</div>

Answer 2

我不完全确定你为什么要使用流体网格＆＃39;特别。除非你不希望它在移动时崩溃到一排。

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

http://getbootstrap.com/css/#grid-example-fluid

Answer 3

如果您想在没有任何框架的情况下执行此操作，可以使用Flexbox

.fluid-container {
  display: flex;
  background: #5B9BD5;
  flex-wrap: wrap;
  padding: 20px;
}
span {
  flex: 0 0 calc(33.33% - 20px);
  background: #F8CBAD;
  min-height: 50px;
  margin: 10px;
}
@media(max-width: 768px) {
  span {
    flex: 0 0 calc(100% - 20px);
  }
}

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