缩略图未居中

Question

所以我正在使用 col-sm-3 大小的缩略图，它们目前没有居中对齐（它们是左对齐的）。我希望它们均匀 space 并居中对齐。我一直在玩偏移量和推动，但永远无法完全均匀 spaced。

我总是发现网站两侧的间距与缩略图之间的间距不一样。

如何使缩略图均匀 spaced 并居中对齐？这是我的代码片段：

<style type="text/css">
    .thumbnail {
        border: 0 none;
        box-shadow: none;
    }

    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    div.center
    {
        text-align: center;
    }
</style>
<div class="row center">
    <div class="col-sm-3">
        <div class="thumbnail">
            <i class="fa fa-users fa-5x"></i>
            <div class="caption">
                <h3>Community Driven</h3>
                <p>The more notes are added, the more knowledge is shared.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail">
            <i class="fa fa-users fa-5x"></i>
            <div class="caption">
                <h3>Community Driven</h3>
                <p>The more notes are added, the more knowledge is shared.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail">
            <i class="fa fa-users fa-5x"></i>
            <div class="caption">
                <h3>Community Driven</h3>
                <p>The more notes are added, the more knowledge is shared.</p>
            </div>
        </div>
    </div>
</div>

Answer 1

Bootstrap 的网格基于 12 列。它将每个 .row 分成 12 列，并使用像 .col-xs-6 或 .col-sm-3 这样的类列来定义您的内容应该使用多少列。在这种情况下，xs 屏幕 12 个中有 6 个，sm 屏幕 12 个中有 3 个。

您希望 sm 的屏幕分成三部分，因此您需要将每个 .thumbnail 都包含在一个 .col-sm-4 中。但是，您还希望 .thumbnail 更小，您希望它 .col-sm-3 宽。

这不容易映射到 Bootstrap 的网格框架，因为每个部分需要偏移 (12 - 3 * 3) / 4 = 0.75 列。一种解决方案可能是通过添加 margin-left: 6.25%.

自己定义此偏移量

.thumbnail {
  border: 0 none;
  box-shadow: none;
}

.col-sm-offset-3-4 {
  margin-left: 6.25%;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


<div class="container">
<div class="row text-center">
  <div class="col-sm-3 col-sm-offset-3-4">
    <div class="thumbnail">
      <i class="fa fa-users fa-5x"></i>
      <div class="caption">
        <h3>Community Driven</h3>
        <p>The more notes are added, the more knowledge is shared.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-sm-offset-3-4">
    <div class="thumbnail">
      <i class="fa fa-users fa-5x"></i>
      <div class="caption">
        <h3>Community Driven</h3>
        <p>The more notes are added, the more knowledge is shared.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-sm-offset-3-4">
    <div class="thumbnail">
      <i class="fa fa-users fa-5x"></i>
      <div class="caption">
        <h3>Community Driven</h3>
        <p>The more notes are added, the more knowledge is shared.</p>
      </div>
    </div>
  </div>
</div>
  </div>

一个更好的解决方案可能是简单地使用 .col-sm-4 将屏幕分成三个相等的部分，并在您添加一些水平填充的列内容周围添加一个 <div>。

PS 我认为如果你真的想要这个，重新考虑一下是个好主意。它真的必须看起来完全像这样吗？如果是这样，您希望它在更小或更大的屏幕上看起来如何？

缩略图未居中

Thumbnails Not Centered

html

twitter-bootstrap

twitter-bootstrap-3