2016-06-26 1 views
0

내용을 가로로 표시하려하지만 결과가 예상과 다릅니다.부트 스트랩 3 : 새 행의 내용이 맞춰지지 않았습니다.

다섯 번째 열 ("content 5")은 왼쪽 하단에 나타나고 위 내용으로 정렬되어야합니다. 여기

JSBin

내 코드입니다 :

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

답변

2

.row 이상 12 (부트 스트랩에서 기본 격자를 사용) 할 수 없습니다 당 .col의의 합을 부트 스트랩에서, 당신은 가지고있다 5 열은 .col-md-3이므로 3x5 = 15가 12보다 높습니다 (최대 그리드 부트 스트랩은 기본적으로 허용).

5 번째에 추가 .row을 추가해야합니다.

는 귀하의 경우 .row의 중첩 필요하지 않습니다bootstrap docs

참고 그리드에 대한 자세한 정보를 참조하십시오.

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

관련 문제