缩略图未居中

Question

因此，我正在使用col-sm-3大小的缩略图，它们当前未居中对齐（它们保持左对齐）。 我希望它们的空间和中心均匀对齐。 我一直在玩偏移量和推入式游戏，但永远无法获得均匀的间隔。

我总是最终使站点两边之间的间距与缩略图之间的其他间距不同。

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

<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屏幕有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> 。

附言：我确实认为，如果您真的想要这个，请重新考虑。 真的必须看起来完全像这样吗？ 如果是这样，您如何期望它在较小或较大的屏幕上显示？