[v] 如何把 bootstrap 內容置中?

Offsetting columns


Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

這是一個 view template 中常見的 Bootstrap Grid System 起手式

<div class="container col-md-8 col-md-offset-2">

使用 Bootstrap Grid 要給一個 container 標籤,所以我們下 class="container"; Grid system 總共 12 columns, col-md-8 佔了 8 columns, col-md-offset-2 則是將 col-md 往右推 2 columns.

所以如果要將內容置中,也就是左右對稱,就用簡單的數學算一下,12 - 8 = 4, 4/2 = 2, 所以加上 col-md-offset-2 就能讓內容置中了。

如果是 col-xs-8, 就要用 col-xs-offset-* 來推,所以也可能有 col-md-6 col-xs-8 col-md-offset-3 col-xs-offset-2 的設定。