我正在使用Bourbon Neat。我在网格设置中设置了一些断点,对于我设置4的移动版本,如下所示:
$mobile: new-breakpoint(max-width 480px 4);
我设置左右容器,如左边3个,右边1个;像这样:
.demo
{
@include outer-container;
.leftContainer
{
@include span-columns( 6 );
background-color:crimson;
@include media($mobile) {
@include span-columns( 3 of 4);
}
}
.rightContainer
{
@include span-columns( 6 );
background-color:blue;
}
@include media($mobile) {
@include span-columns( 1 of 4 );
}
}
但不知何故,容器彼此堆叠而不是跨越3列和1列。我做错了什么?
答案 0 :(得分:3)
如果没有看到HTML也很难说,但看起来像.rightContainer代码正在破坏。第二个@include媒体($ mobile){}在.rightContainer {}
之外试试这个:
.demo{
@include outer-container;
.leftContainer {
@include span-columns( 6 );
background-color:crimson;
@include media($mobile) {
@include span-columns( 3 of 4);
}
}
.rightContainer{
@include span-columns( 6 );
background-color:blue;
@include media($mobile) {
@include span-columns( 1 of 4 );
}
}
}
答案 1 :(得分:1)
您正在使用@include span-columns(3 of 4)
,但.leftContainer
和.rightContainer
未嵌套在另一个div span-columns()
内,因此您不应将父列的列作为参数。
试试这个:
.demo{
@include outer-container;
.leftContainer {
@include span-columns( 6 );
background-color:crimson;
@include media($mobile) {
@include span-columns(3); /*Change this line*/
}
}
.rightContainer{
@include span-columns( 6 );
background-color:blue;
@include media($mobile) {
@include span-columns(1); /*and this one*/
}
}
}
也许您可以查看 this documentation以获取更多帮助。