Wie verteilt man gleich mehrere Schachteln gleicher Breite innerhalb eines Bootstrap-Flüssigkeitsbehälters?

Question

Wie verteilt man gleich mehrere Schachteln gleicher Breite innerhalb eines Flüssigkeitsbehälters?

Ich habe folgend:

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

Ich möchte dieses Ergebnis gut erreichen, auch im Abstand Boxen, wo jede rosa Box einen bestimmten Text enthält, innerhalb des blauen Flüssigkeitsbehälters immer mit der gleichen Breite ist:

ich versuchte Boxen in der es einzurichten, aber dann bekomme ich sie eine nach ihnen in der nächsten Zeile nicht den Seitenraum mit optimal:

Wenn ich etwas nicht im Text verwenden (wie die Spanne I verwendet wird), dann wird der Flüssigkeitsbehälter macht seinen Trick, aber der Text nicht gleichmäßig angeordnet ist (in diesem Fall ist die gelben Kästen Text sind, die ist nicht mit jedem Tag enthält):

Welche Klasse/CSS-Code soll ich den Text verwenden zu organisieren und wickeln, so dass es in gleicher Breite Box führen? Die Anzahl der Boxen ist nicht bekannt.

Answer 1

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

Bootstrap enthält eine ansprechende, bewegliche erste Systemfluid Gitter, das in geeigneter Weise erhöht sich auf 12 Spalten, wie das Gerät oder die Anzeigengröße skaliert. Es enthält vordefinierte Klassen für einfache Layout-Optionen, wie zum Beispiel , sowie leistungsstarke Mixins zum Erzeugen von mehr semantischen Layouts.

<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

Ich bin nicht ganz sicher, warum Sie ein ‚Fluid Grid‘ speziell verwenden möchten. Es sei denn, Sie möchten nicht, dass es auf Mobilgeräten zu einer Zeile zusammenfällt.

<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

Wenn Sie dies ohne Rahmen tun möchten, können Sie 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>