如何水平居中 Twitter Bootstrap 网格元素

Question

我正在开发一个完全基于 Twitter Bootstrap 3 构建的网站。我在整个网站上都使用网格系统，但我在一个页面上有一个特定的用例。它将显示一个动态生成的缩略图网格，但它应该从中心开始填充它们。 Twitter Bootstrap 网格元素默认从左到右对齐（使用 float:left）。我已经尝试了一些东西，但到目前为止还没有想出一种仅使用 html 和 css 来改变这种行为的方法。有人有什么建议吗？

这是我不希望它看起来如何的小提琴：http://jsfiddle.net/9hLS6/

注意缩略图如何向左对齐。相反，我希望它们从中心“开始”，然后后面的每个应该将自己放置在前一个的右侧，以便它们始终居中（调整 6 列布局中的默认偏移量）。以下是我希望元素以很棒的图形显示的方式：

|       O          |// row with one thumb
|       O  O       |// row with 2 thumbs
|    O  O  O       |// ...
|    O  O  O  O    |
| O  O  O  O  O    |
| O  O  O  O  O  O |     

Answer 1

好的 - 请记住，我不知道您是如何提取这些动态元素的。如果我想达到这些效果，我会使用相对简单的 PHP 方法。

确定行数和余数

// For the sake of the example lets say its 16
$elements = 16;

// Consider your 6 column layout
$eachrow = 6;

// Determine number of rows & remainder
$rows = $elements / $eachrow;
$lastrow = $elements % $eachrow;

// In case you don't have a multiplier of 6
  if ($lastrow > 0) { 
    $rows = $rows+1; 
  }

根据余数使用正确的偏移量

// The last row's classes are dependent on number of elements.

if ($remainder == 1) {
  $remclass1 = ".col-md-1 .col-md-offset-2";
}

if ($remainder == 2) {
  $remclass1 = ".col-md-1 .col-md-offset-2";
  $remclass2 = ".col-md-1";
}

if ($remainder == 3) {
  $remclass1 = ".col-md-1 .col-md-offset-1";
  $remclass2 = ".col-md-1";
  $remclass3 = ".col-md-1";
}

if ($remainder == 4) {
  $remclass1 = ".col-md-1 .col-md-offset-1";
  $remclass2 = ".col-md-1";
  $remclass3 = ".col-md-1";
  $remclass4 = ".col-md-1";
}

if ($remainder == 5) {
  $remclass1 = ".col-md-1";
  $remclass2 = ".col-md-1";
  $remclass3 = ".col-md-1";
  $remclass4 = ".col-md-1";
  $remclass4 = ".col-md-1";
}