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

Question

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

这是一个我不希望它看起来如何的 fiddle :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";
}