引導 - 中心div與col-ld- *

Question

我有一個項目部分。這個項目現在只有3個，但我還在增加新的項目。問題是，當尺寸屏幕在768px和1200px之間時，我的div是2行，而第3行是在新行中並且沒關係，但是可能是行中間的第3個div？

現在最後是左邊的新行。這將是更好看在中心。 我的意思是，當一個div在新行上，並且獨自一人時，我想成爲它的中心行。

這裏是我的引導代碼：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section class="no-padding" id="portfolio"> 
 
    <div class="container-fluid"> 
 
    <h2 class="section-heading text-center">Projects</h2> 
 
    <hr class="primary"> 
 
    <div class="row no-gutter center-block"> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <a href="#" target="_blank" class="portfolio-box"> 
 
      <img src="img/portfolio/thumbnails/skull.jpg" class="img-responsive" alt=""> 
 
      <div class="portfolio-box-caption"> 
 
      <div class="portfolio-box-caption-content"> 
 
       <div class="project-category text-faded"> 
 
       Visits system 
 
       </div> 
 
       <div class="project-name"> 
 
       Hospital 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     <div class="bg-dark gitHub"> 
 
      <div class="text-center gitLink"> 
 
      <a href="#" target="_blank">Source code</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <a href="#" target="_blank" class="portfolio-box"> 
 
      <img src="img/portfolio/thumbnails/pets1.jpg" class="img-responsive" alt=""> 
 
      <div class="portfolio-box-caption"> 
 
      <div class="portfolio-box-caption-content"> 
 
       <div class="project-category text-faded"> 
 
       Shopping 
 
       </div> 
 
       <div class="project-name"> 
 
       Shop 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     <div class="bg-dark gitHub"> 
 
      <div class="text-center gitLink"> 
 
      <a href="#" target="_blank">Source code</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6 center-block"> 
 
     <a href="#" target="_blank" class="portfolio-box"> 
 
      <img src="img/portfolio/thumbnails/forum.jpg" class="img-responsive" alt=""> 
 
      <div class="portfolio-box-caption"> 
 
      <div class="portfolio-box-caption-content"> 
 
       <div class="project-category text-faded"> 
 
       Under construction 
 
       </div> 
 
       <div class="project-name"> 
 
       Forum 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     <div class="bg-dark gitHub"> 
 
      <div class="text-center gitLink"> 
 
      <a href="#" target="_blank">Source code</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

它看起來像現在這個樣子，我想在中心最後一個div - 這可能了響應的屏幕？

當我添加COL-MD-偏移3比1200像素，現在它看起來像這樣：

Answer 1

試試這個

<div class="col-lg-4 col-sm-6 col-sm-offset-3 col-lg-offset-0"> 
      <a href="#" target="_blank" class="portfolio-box"> 
       <img src="img/portfolio/thumbnails/forum.jpg" 
       class="img-responsive" alt=""> 
       <div class="portfolio-box-caption"> 
        <div class="portfolio-box-caption-content"> 
         <div class="project-category text-faded"> 
          Under construction 
         </div> 
         <div class="project-name"> 
          Forum 
         </div> 
        </div> 
       </div> 
      </a> 
      <div class="bg-dark gitHub"> 
       <div class="text-center gitLink"> 
        <a href="#" target="_blank">Source code</a> 
       </div> 
      </div> 
</div> 

添加偏移時屏幕小應讓它起作用。

Answer 2

只需將「col-sm-offset-3」添加到最後一列，並刪除「class-center-class」類。這將給出預期的輸出

Answer 3

爲可視化添加顏色，將col-sm-offset-3添加到第三個div，然後刪除那個center-block。我還添加了col-xs-*這樣您就可以看到它的片段

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section class="no-padding" id="portfolio"> 
 
    <div class="container-fluid"> 
 
    <h2 class="section-heading text-center">Projects</h2> 
 
    <hr class="primary"> 
 
    <div class="row no-gutter center-block"> 
 
     <div class="col-lg-4 col-sm-6 col-xs-6" style="background-color:red"> 
 
     <a href="#" target="_blank" class="portfolio-box"> 
 
      <img src="img/portfolio/thumbnails/skull.jpg" class="img-responsive" alt=""> 
 
      <div class="portfolio-box-caption"> 
 
      <div class="portfolio-box-caption-content"> 
 
       <div class="project-category text-faded"> 
 
       Visits system 
 
       </div> 
 
       <div class="project-name"> 
 
       Hospital 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     <div class="bg-dark gitHub"> 
 
      <div class="text-center gitLink"> 
 
      <a href="#" target="_blank">Source code</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6 col-xs-6" style="background-color:blue"> 
 
     <a href="#" target="_blank" class="portfolio-box"> 
 
      <img src="img/portfolio/thumbnails/pets1.jpg" class="img-responsive" alt=""> 
 
      <div class="portfolio-box-caption"> 
 
      <div class="portfolio-box-caption-content"> 
 
       <div class="project-category text-faded"> 
 
       Shopping 
 
       </div> 
 
       <div class="project-name"> 
 
       Shop 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     <div class="bg-dark gitHub"> 
 
      <div class="text-center gitLink"> 
 
      <a href="#" target="_blank">Source code</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3" style="background-color:pink"> 
 
     <a href="#" target="_blank" class="portfolio-box"> 
 
      <img src="img/portfolio/thumbnails/forum.jpg" class="img-responsive" alt=""> 
 
      <div class="portfolio-box-caption"> 
 
      <div class="portfolio-box-caption-content"> 
 
       <div class="project-category text-faded"> 
 
       Under construction 
 
       </div> 
 
       <div class="project-name"> 
 
       Forum 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     <div class="bg-dark gitHub"> 
 
      <div class="text-center gitLink"> 
 
      <a href="#" target="_blank">Source code</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>