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-offset-3添加到1200 px时，现在看起来像这样：

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

只需添加＆＃34; col-sm-offset-3＆＃34;到你的最后一栏并删除你的课程＆＃34; center-block＆＃34;。这将给出预期的输出

Answer 3

为可视化添加了颜色，将col-sm-offset-3添加到第3个div，然后删除center-block。我还添加了col-xs-*，以便您可以在代码段中看到它

＆＃13;

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

＆＃13;

Bootstrap - 中心div与col-ld - *

3 个答案: