colonnes imbriquées dans la boussole/sass

Question

J'ai étudié la boussole et même si c'est amusant de jouer avec et d'utiliser, une chose me dérange (en plus d'être incapable d'ajouter du rembourrage car cela détruit la grille), comment nicher? colonnes?

Je veux être capable de faire ce que blueprint fait: emboîter des conteneurs comme dis, j'ai une page de 24 colonnes divisée en deux (17 et 7 colonnes). Dans la partie droite de cette page (celle avec 7 colonnes), je veux diviser certains éléments en deux (2 et 5 colonnes).

J'ai essayé ceci:

#main 
    +container 

    #main-content 
    +column(17) 
    +box-padding(17, 10px) 
    :margin 
    :right 0 

    #sidebar 
    +column(7, true) 
    +box-padding(7, 10px) 

C'est le code de la page principale. La barre latérale contient une liste avec quelques étiquettes et champs de saisie

li 
    +container 
    :margin 
    :bottom 5px 

label 
    +column(2) 
    :margin 
    :right 0 

input 
    +column(5, true) 

Il Kinda fonctionne, mais l'inspection de la li Firebug montre que sa largeur est en fait 950px par opposition à être juste 270px car il est à seulement 7 colonnes. J'ai essayé de googler sur les colonnes imbriquées mais je n'arrive pas à trouver d'exemple dans la boussole. J'ai également essayé le wiki et la documentation en vain.

Answer 1

Je pense qu'une partie du problème (peut-être le problème entier?) Est que vous avez appliqué le container mixin au li. Ce mixin définit la largeur comme la valeur de !blueprint_container_size qui, par défaut, a une valeur de 950px (mais peut être surchargée). Enlevez cela et vous devriez aller bien. Le conteneur est destiné à délimiter l'ensemble, pas des parties dans le tout.