Question

我想做一个3列布局，并且需要将这些列嵌套到一个容器中。对于drupal主题，所以有很多html东西。基本上代码结构看起来像这样：

<section id="general">

      <div id="content-global">

       <!-- ______________________ CONTENT INNER GLOBAL _______________________ -->
        <div id="content-inner" class="page-MODELE">

        <!-- ______________________ CONTENU CENTRAL _______________________ -->
          <div id="middle-content" class="page-MODELE">

            <!--______________NODE TPL POUR PAGE.TPL CUSTOM________________ -->
<div class="node " id="node-16">
    <div class="node-inner">
        <!--______________COLONNE 1________________ -->
                <div class="colonne-1 col1_layout_3_8_3">
                        <h1 class="titre_page">Présentation du lycée</h1>

                    </div>
        <!--______________COLONNE 2________________ -->
         <!-- <pre>  </pre>-->   <!-- listage des variables du $content -->
        <div class="colonne-2 col2_layout_3_8_3">

        </div>

        <!--______________COLONNE 3________________ -->
        <div class="colonne-3 col3_layout_3_8_3">
                </div>

    </div> <!-- /node-inner -->
</div> <!-- /node-->                        </div> <!-- /#middle-content -->

      </div> <!-- /content-inner /content -->
    </section>

#general是@include container($total-columns, $desktop, $tablet);的主要容器。列是中间内容，如下所示：

.col1_layout_3_8_3{
    @include at-breakpoint ($mobile){
        //@include span-columns($mobile);
    }
    @include at-breakpoint ($desktop){
        @include span-columns(3 alpha,$desktop);

    }
    @include at-breakpoint ($tablet){
        @include span-columns($tablet);
    }
}
.col2_layout_3_8_3{
    @include at-breakpoint ($mobile){
        @include span-columns($mobile);
    }
    @include at-breakpoint ($desktop){
        @include span-columns(8);
    }
    @include at-breakpoint ($tablet){
        @include span-columns($tablet);
    }
}
.col3_layout_3_8_3{
    @include at-breakpoint ($mobile){
        @include span-columns($mobile);
    }
    @include at-breakpoint ($desktop){
        @include span-columns(3);
    }
    @include at-breakpoint ($tablet){
        @include span-columns($tablet);
    }
}

但实际上，每列使用最大宽度而不是断点值。我需要使用alpha和omega吗？另外，我如何根据选择课程来改变布局？在susy之前，我使用colonne-1类来给列位置，而另一个类就像col1_3_5_3来设置列的大小。我可以用susy做同样的事情吗？

感谢

编辑：用于网格的变量

//*Réglage de la grille de Susy - approche mobile-first
$total-columns: 4;             // nombre de colonnes de la grille de base
$column-width: 3.70em;            // largeur de chaque colonnes (px,em,%)
$gutter-width: 0.75em;            // taille de la gouttière entre colonnes (px,em,%)
$grid-padding: $gutter-width;  // grid-padding equal to gutters

//Réglage du nombre de colonnes pour at-breakpoint() mixin 
// qui simplifie les media-queries
$mobile   : 4;
$tablet   : 10;
$desktop  : 14;

嵌套列与susy

0 个答案: