html - Bootstrap - 带 cold-* 的中心 div

Question

我有一个元素部分。这个元素现在只有 3 个，但我仍在添加新元素。问题是，当屏幕尺寸在 768px 和 1200px 之间时，我的 div 是 2 行，而第 3 行是新行，没关系，但是有可能成为行中心的第 3 个 div 吗？

现在 last 在左边的新行上。居中会更好看。我的意思是，当一个 div 在新行上并且单独存在时，我想将它放在中间一行。

这是我的 Bootstrap 代码:

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

在屏幕较小时添加偏移量应该可以正常工作。