Question

我正在使用Neat 1.7 仅当使用页面的背景图像@include background-image（url（“../ img / background.jpg”））时，无法将网格列与整齐的网格对齐（网格会向左和向右截断）; < / p>

找到解决方案.... 问题在于以下2行代码，最好不要在最顶层的div标签中使用它...在较低的div标签.grid_head中使用它。 grid_content和grid_footer

font-size: 13px;
line-height: 157%

**_grid-settings.scss** 
// Change the grid settings
$column: 90px;
$gutter: 30px;
$grid-columns: 12;
$max-width: em(1088);


// Define your breakpoints
$tablet: new-breakpoint(max-width 768px 8);
$mobile: new-breakpoint(max-width 480px 4);

// _struct.scss文件

.grid_back {

    @include background-image(url("../img/background.jpg"));

    color: #ADADAD;
    letter-spacing: 0px;
    min-width: 1020px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

    font-size: 13px;   // remove this... then it will work
    line-height: 157%;  // remove this... then it will work 

}

.grid_wrapper {
    @include outer-container;
    background-color: #aaf;
    @include fill-parent;

    @include media($mobile) {
        @include span-columns(4);
    }
    @include media($tablet) {
        @include span-columns(8);
    }
}
.grid_head {

    background-color: #aaf;
    @include fill-parent;
    @include media($mobile) {
        @include span-columns(4);
    }
    @include media($tablet) {
        @include span-columns(8);
    }
}

.grid_content {

    background-color: red;
    @include fill-parent;
    @include media($mobile) {
        @include span-columns(4);
    }
    @include media($tablet) {
        @include span-columns(8);
    }
}

.grid_footer {

    background-color: blue;
    @include fill-parent;
    @include media($mobile) {
        @include span-columns(4);
    }
    @include media($tablet) {
        @include span-columns(8);
    }

// html file ...

   <body>
        <div class="grid_back"> 
            <div class="grid_wrapper"> 
                <div class="grid_head"> <P>Grid Head</P> </div>
                <div class="grid_content"> <P>Grid Content</P> </div>
                <div class="grid_footer"> <P>footer</P> </div>
            </div>
        </div>
    </body>

整齐的网格左右截断

0 个答案: