如何使用藍圖CSS框架

Question

到中心一箱我_base.scss包含以下

$blueprint-grid-columns: 12; 
$blueprint-container-size: 750px; 
$blueprint-grid-margin: 0px; 
// Use this to calculate the width based on the total width. 
// Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you. 
$blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin)/$blueprint-grid-columns - $blueprint-grid-margin; 

在我的網頁我有一個大盒子是750 px寬

#big-box { 
    @include container; 
    background-color: #FFFFFF; 
    margin-top: 15px; 
    min-height: 550px; 
} 

這個盒子我想有內一箇中心對齊的盒子，但我似乎無法完成這個任務。下面是我的代碼

#login{ 
    @include container; 
    margin-top: 15px; 
    @include column(11); 
    background-color: #F1F1F1; 
} 

，我應該怎麼做才能讓#login箱在中間？

它現在的樣子Image：

Answer 1

失敗的原因是column混入不僅設置元素的寬度，而且還漂浮它留下並應用右頁邊距（除非它是最後一列，沒有餘量）。 span由column mixin在內部用於設置寬度。因此，您可以在此處使用span來簡單設置寬度，而不會獲得column將添加的浮動和邊距。

退房這裏的指南針藍圖電網實現：
https://github.com/chriseppstein/compass/blob/stable/frameworks/blueprint/stylesheets/blueprint/_grid.scss

所以如果你使用span而不是column，你只得到你想要的寬度。然後你可以申請margin: 0 auto;來獲得你想要的中心。 container也是這樣設置的，儘管通常你想使用container，因爲它是用於藍圖的，因爲它應用於頂層佈局元素。如果您只是自己應用邊距，則不需要覆蓋container設置的網格寬度。

另一種「網格」方式可以解決這個問題，那就是預先添加/附加列以將框推到中心。例如。如果您的佈局橫跨19個，並且框寬11個，則可能需要@include prepend(4);將4列寬度添加到框的左側。

#login { 
    // Don't include container. In blueprint "container" means this is an outer 
    // container for the grid, and has the grid width, centered on the page. 
    // @include container; 

    @include column(11); 

    // I have no idea how many columns your page has, but if it had 19, 4 left columns 
    // would effectively center the div. | 4 + 11 + 4 |. 
    // Adjust to your real layout. 
    @include prepend(4); 
}