Bootstrap 3：新行中的內容未對齊

我試圖水平顯示內容，但結果與預期不符。Bootstrap 3：新行中的內容未對齊

第五列（「內容5」）應顯示在左下角，並與上面的內容對齊。

這裏是我的代碼：

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

來源

2016-06-26 dams

在自舉.col S的總和每超過12（使用默認的引導電網）.row不能和你有5列與.col-md-3，所以這是3x5 = 15，這是高於12（最大電網自舉允許默認情況下）

因此，你必須添加另一個.row爲第五個。

查看bootstrap docs

注意你不需要在你的情況嵌套.row是關於電網的詳細信息。

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

來源

2016-06-26 13:09:17 dippas

Bootstrap 3：新行中的內容未對齊

回答

相關問題