ブートストラップの液体容器の内部に同じ幅の箱を均等に配る方法は？

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

ブートストラップは、適切デバイスまたはビューポートのサイズ 増加するにつれて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

私はあなたが、特に「流体グリッド」を使用したい理由を全くわかりません。あなたがモバイル上で行を崩壊させたくない場合を除きます。

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