使用引導程序時遇到網格間距問題

Question

我是一名後端開發人員，希望讓我的前端技能達到標準。我正在關注使用bootstrap構建投資組合網站的視頻教程 - 但我遇到了一些障礙。我已經三重檢查了我的代碼，甚至開始了教訓，試圖看看我是否只是一些愚蠢的錯誤（它很可能）。

我的照片應該位於3列寬的網格中。不幸的是，圖像顯示爲2列和2行，並且間距似乎關閉（太多）。

這是有問題的HTML。我還包括藥丸導航代碼，以防萬一它是相關的。

<div class="container-fluid filterable-portfolio"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <ul class="nav nav-pills"> 
      <li class="portfolio-title">Filter by:</li> 
      <li role="presentation" class="active"><a href="#">All</a></li> 
      <li role="presentation"><a href="#">School Projects</a></li> 
      <li role="presentation"><a href="#">Personal Projects</a></li> 
      <li role="presentation"><a href="#">Unity Projects</a></li> 
      <li role="presentation"><a href="#">etc.</a></li> 
      </ul> 
     </div> 
    </div> 
    <div class="row portfolio-items"> 

     <figure class="portfolio-item col-sm-4"> 
     <a href="#"> 
     <img src="http://placekitten.com/700/400" class="img-responsive"> 
     </a> 
     </figure> 

     <figure class="portfolio-item col-sm-4"> 
     <a href="#"> 
     <img src="http://placekitten.com/700/400" class="img-responsive"> 
     </a> 
     </figure> 

     <figure class="portfolio-item col-sm-4"> 
     <a href="#"> 
     <img src="http://placekitten.com/700/400" class="img-responsive"> 
     </a> 
     </figure> 

     <figure class="portfolio-item col-sm-4"> 
     <a href="#"> 
     <img src="http://placekitten.com/700/400" class="img-responsive"> 
     </a> 
     </figure> 

     <figure class="portfolio-item col-sm-4"> 
     <a href="#"> 
     <img src="http://placekitten.com/700/400" class="img-responsive"> 
     </a> 
     </figure> 

     <figure class="portfolio-item col-sm-4"> 
     <a href="#"> 
     <img src="http://placekitten.com/700/400" class="img-responsive"> 
     </a> 
     </figure> 

    </div> 
</div> 

這裏是CSS代碼 - 不知道這是否是問題，但我認爲更多的信息不會傷害。

.portfolio-title{ 
padding: 10px 15px 10px 0; 
font-weight: bold; 
} 
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {  
background: #111; 
color: #f5f5f5; 
} 

.nav-pills a{ 
color: #f5f5f5; 
margin-bottom: 1rem; 
} 

.nav>li>a:hover, .nav>li>a:focus { 
background: none; 
} 

.portfolio-item { 
margin-bottom: 1rem;  
} 

.portfolio-item img { 
-webkit-filter:grayscale(100%); 
filter:grayscale(100%); 
border-radius:6px; 
} 

.portfolio-item:hover img { 
-webkit-filter: grayscale(50%); 
filter: grayscale(50%); 
} 

.filterable-portfolio{ 
margin-bottom: 3rem; 
} 
.portfolio-item img{  
width :100%;  
} 

任何幫助，這將是非常感謝。我真的很想知道我究竟做錯了什麼。非常感謝您花時間幫助解決這個問題！

Answer 1

試試這個..

<div class="container-fluid filterable-portfolio"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <ul class="nav nav-pills"> 
      <li class="portfolio-title">Filter by:</li> 
      <li role="presentation" class="active"><a href="#">All</a></li> 
      <li role="presentation"><a href="#">School Projects</a></li> 
      <li role="presentation"><a href="#">Personal Projects</a></li> 
      <li role="presentation"><a href="#">Unity Projects</a></li> 
      <li role="presentation"><a href="#">etc.</a></li> 
      </ul> 
     </div> 
    </div> 
    <div class="row portfolio-items"> 
     <figure class="portfolio-item col-sm-4"> 
     <a href="#"> 
     <img src="http://placekitten.com/700/400" class="img-responsive"> 
     </a> 
     </figure> 
     <figure class="portfolio-item col-sm-4"> 
     <a href="#"> 
     <img src="http://placekitten.com/700/400" class="img-responsive"> 
     </a> 
     </figure> 
     <figure class="portfolio-item col-sm-4"> 
     <a href="#"> 
     <img src="http://placekitten.com/700/400" class="img-responsive"> 
     </a> 
     </figure> 
     </div> 
     </div> 

您使用的6個照片這就是爲什麼rows.if你想6張照片需要2是一個網格，它會每2列...因爲單個網格有12列...希望它可以幫助