2010-05-20 3 views
0

Я изучаю компас, и, хотя это забавная вещь для игры и использования, меня беспокоит одна вещь (помимо того, что я не могу добавить отступы, когда она разрушает сетку), как я могу гнездиться столбцы?Вложенные столбцы в компасе/sass

Я хочу, чтобы иметь возможность сделать то, что делает: гнездовые контейнеры, как говорят, у меня есть 24-столбцовая страница, разделенная на две (17 и 7 столбцов). В правой части этой страницы (с 7 столбцами) я хочу разделить некоторые элементы на два (2 и 5 столбцов).

Я попытался это:

#main 
    +container 

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

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

Это код главной страницы. Боковая панель содержит список с некоторыми лейблами и полями ввода

li 
    +container 
    :margin 
    :bottom 5px 

label 
    +column(2) 
    :margin 
    :right 0 

input 
    +column(5, true) 

Она любопытное работает, но осматривая Ли в поджигатель показывает, что это ширина фактически 950px в противоположность быть только 270px, так как это всего лишь 7 столбцов. Я пробовал поиск по вложенным столбцам, но я не могу найти какой-либо пример в компасе. Я также пробовал вики и документацию безрезультатно.

ответ

1

Я думаю, что часть проблемы (может быть, вся проблема?) Заключается в том, что вы применили mixin container к li. Этот mixin определяет ширину как значение !blueprint_container_size, которое по умолчанию имеет значение 950px (но может быть переопределено). Удалите это, и с вами все будет в порядке. Контейнер предназначен для разграничения целого, а не части внутри целого.

+0

Я действительно пробовал это без контейнера mixin, но это делает его хуже, поскольку столбцы больше не работают. Должен ли быть миксин, который я должен использовать вместо + контейнера? – corroded

+0

'+ container' - это правильный mixin для использования на' # main', но поскольку он определяет общую ширину тела, он не входит в элемент списка. Можете ли вы обновить свой вопрос, что происходит, когда вы удаляете mixin из своего 'li'? Я немного растерялся, что это не сработает для вас; Я знаю, что раньше я использовал его. –

+0

Я пошел вперед и просто использовал float left и добавил ширину к моим меткам и полям ввода, но im также сообщил, что столбец mixin не работает для меня. Я почти уверен, что когда-нибудь снова займусь этой проблемой, поэтому я вскоре обновлю свой вопрос с вашим запросом. – corroded

Смежные вопросы