Question

所以我正在使用col-sm-3大小的缩略图，它们当前没有居中对齐（它们是左对齐的）。 Problem 我希望它们均匀空间和居中对齐。我一直在玩补偿和推动，但永远不会得到完全均匀的间距。

Second Picture

我总是最终得到网站两边的间距与缩略图之间的其他间距不一样。

如何使缩略图均匀分布并居中对齐？下面是我的代码片段：

<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

Bootstraps网格基于12列。它将每个.row划分为12列，并使用.col-xs-6或.col-sm-3等列类来定义内容应使用的列数。在这种情况下， xs 屏幕为6 out 12， sm 屏幕为12 out3。

您希望将屏幕拆分为 sm 的三个部分，因此您需要将.thumbnail包含在.col-sm-4中。不过，您还希望.thumbnail更小，您希望它.col-sm-3宽。

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

＆＃13;

.thumbnail {
  border: 0 none;
  box-shadow: none;
}

.col-sm-offset-3-4 {
  margin-left: 6.25%;
}

＆＃13;

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

＆＃13;

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

PS 我认为如果你真的想要这个，我认为重新思考是一个好主意。它真的必须看起来像这样吗？如果是这样，你怎么看待它在更小或更大的屏幕上看？

缩略图不居中

1 个答案: