Bootstrap - 带有 col-ld-* 的中心 div答案

【问题标题】：Bootstrap - center div's with col-ld-*Bootstrap - 带有 col-ld-* 的中心 div
【发布时间】：2017-11-21 05:45:31
【问题描述】：

我有一个项目部分。这个项目现在只有 3 个，但我仍在添加新项目。问题是，当屏幕尺寸在768px 和1200px 之间时，我的div 是2 行，而第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 - 响应式屏幕可以吗？

当我在 1200 像素上添加 col-md-offset-3 时，它现在看起来像这样：

【问题讨论】：

你的意思是新的顺序会是这样的：1st 3rd 2nd？
居中但仍在下一行？
我添加了一张现在的照片，我想成为中心的最后一个 div

标签： html css twitter-bootstrap

【解决方案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>

在屏幕小的时候添加偏移应该可以工作。

【讨论】：

现在在 768 和 1200 像素之间工作得很好，但是，当我有 1200 像素时，这看起来很糟糕 - 我添加了照片。这个偏移量会破坏超过 1200px 的所有东西
已更新答案，请检查并告诉我是否有效。
它有效，但它现在不在 992 和 1200 像素之间的中心。其余尺寸看起来不错。
哦，我的错，我应该在 lg 中给出偏移量 0 ...编辑。
因为我们已经设置了 lg-4 和 sm-6 ，所以 sm-6 表示 sm 及以上的 6 列，除非明确指定。所以默认情况下 md 也是 6（包括大小和偏移量）。 lg 是 4 因此它不需要 offset ，因此那里是 offset 0 。请阅读网格如何在 Bootstrap 中工作，那里有一个非常甜美和简单的文档。 :)

【解决方案2】：

只需将“col-sm-offset-3”添加到您的最后一列并删除您的类“center-block”。这将给出预期的输出

【讨论】：

【解决方案3】：

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

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

【讨论】：