Question

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

这里有一个我不想要它的样子：http://jsfiddle.net/9hLS6/

注意缩略图如何将自己对齐到左侧。相反，我希望他们开始＆＃34;开始＆＃34;在中心，然后每个跟随一个应该将自己置于前一个的右侧，以便它们始终居中（调整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方法。

确定数量或行数＆amp;其余的

// 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";
}

如何横向中心Twitter Bootstrap网格元素

1 个答案: