ブートストラップセンターdivのcol-ld- *

Question

私にはプロジェクトがあるセクションがあります。このプロジェクトは現在3つしかありませんが、私はまだ新しいプロジェクトを追加しています。問題は、サイズ画面が768pxと1200pxの間にある場合、私のdivは2行、3行目は改行しても大丈夫ですが、この3行目の行の中心になる可能性がありますか？

ここで、最後は新しい行です。それは中心になるように見える方が良いでしょう。 私は、1つの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」を追加し、クラス「センターブロック」を削除します。これにより、予想される出力が得られます

Answer 3

視覚化のために追加された色は、col-sm-offset-3を3番目のdivに追加してからそれを削除します。center-block第一第三第二：あなたはスニペットで

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