Bootstrap 3: Inhalt in einer neuen Zeile ist nicht ausgerichtet

Ich versuche, Inhalt horizontal anzuzeigen, aber das Ergebnis ist nicht wie erwartet.Bootstrap 3: Inhalt in einer neuen Zeile ist nicht ausgerichtet

Die fünfte Spalte ("Inhalt 5") sollte unten links erscheinen und mit dem Inhalt oben ausgerichtet sein.

JSBin

Hier ist mein Code:

<!DOCTYPE html> 
<html class="no-js" lang="fr"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<title>test</title> 
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1"> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-12"> 

<div class="row"> 

<div class="col-md-3 col-sm-4 col-xs-6"> 
<h3>Content 1</h3> 
<h4><a href="#">test</a></h4> 
<p>test</p> 
<p><span class="my-title">0,00&nbsp;€</span></p> 
</div> 

<div class="col-md-3"> 
<h3>Content 2</h3> 
<h4><a href="#">test</a></h4> 
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
<p><span class="my-title">638,25&nbsp;€</span></p> 
</div> 

<div class="col-md-3"> 
<h3>Content 3</h3> 
<h4><a href="#">tablo</a></h4> 
<p>tablo tablo tablo tablo tablo tablo tablo tablo tablo </p> 
<p><span class="my-title">555,00&nbsp;€</span></p> 
</div> 

<div class="col-md-3"> 
<h3>Content 4</h3> 
<h4><a href="#">stage castagnettes avec toto</a></h4> 
<p>stage castagnettes avec toto</p> 
<p><span class="my-title">57,50&nbsp;€</span></p> 
</div> 

<div class="col-md-3"> 
<h3>Content 5</h3> 
<h4><a href="#">reservation trop cool</a></h4> 
<p>reservation trop cool</p> 
<p><span class="my-title">50,00&nbsp;€</span></p> 
</div> 

</div> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html>

Quelle

2016-06-26 dams

die Summe der .col s In Bootstrap pro .row nicht mehr als 12 (unter Verwendung von Standard-Raster in Bootstrap) sein kann, und Sie haben 5 Spalten mit .col-md-3, also das ist 3x5 = 15 das ist höher als 12 (der max grid bootstrap erlaubt standardmäßig)

Also müssen Sie ein weiteres .row für die fünfte hinzufügen.

Weitere Informationen über Gitter auf bootstrap docs

Hinweis Sie nicht .row s in Ihrem Fall verschachtelt müssen.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-3 col-sm-4 col-xs-6"> 
 
     <h3>Content 1</h3> 
 
     <h4><a href="#">test</a></h4> 
 
     <p>test</p> 
 
     <p><span class="my-title">0,00&nbsp;€</span> 
 
     </p> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <h3>Content 2</h3> 
 
     <h4><a href="#">test</a></h4> 
 
     <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
 
     </p> 
 
     <p><span class="my-title">638,25&nbsp;€</span> 
 
     </p> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <h3>Content 3</h3> 
 
     <h4><a href="#">tablo</a></h4> 
 
     <p>tablo tablo tablo tablo tablo tablo tablo tablo tablo</p> 
 
     <p><span class="my-title">555,00&nbsp;€</span> 
 
     </p> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <h3>Content 4</h3> 
 
     <h4><a href="#">stage castagnettes avec toto</a></h4> 
 
     <p>stage castagnettes avec toto</p> 
 
     <p><span class="my-title">57,50&nbsp;€</span> 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-3"> 
 
     <h3>Content 5</h3> 
 
     <h4><a href="#">reservation trop cool</a></h4> 
 
     <p>reservation trop cool</p> 
 
     <p><span class="my-title">50,00&nbsp;€</span> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-06-26 13:09:17 dippas

Bootstrap 3: Inhalt in einer neuen Zeile ist nicht ausgerichtet

Antwort

Verwandte Themen