web-dev-qa-db-fra.com

Protostar: 3 modules horizontalement au-dessus et au-dessous du contenu

J'essaie que le modèle Joomla Protostar crée 3 positions de module personnalisées au-dessus et au-dessous de la zone de contenu.

J'ai ajouté les positions au templateDetails.xml. Et j'ai pensé que je devais ensuite ajouter les positions dans le fichier index.php.

Autour de la ligne 180, j'ai cette section:

        <main id="content" role="main" class="<?php echo $span; ?>">
            <!-- Begin Content -->
            <jdoc:include type="modules" name="position-3" style="xhtml" />
            <jdoc:include type="message" />
            <jdoc:include type="component" />
            <jdoc:include type="modules" name="position-2" style="none" />
            <!-- End Content -->
        </main>

Et puis si j'ai raison, mon code pour mes positions de tête ira avant "message" et en bas après "composant", en utilisant?

<jdoc:include type="modules" name="position-4" style="xhtml" />

mais vous ne savez pas comment faire cela correctement?

Mes positions personnalisées Bas A-B-C et Haut A-B-C doivent être horizontales dans 3 colonnes et remplir 100% de la largeur des sections principales.

Par exemple, si je place un module uniquement sur Bottom-A, ce module remplira 100% de la largeur (même largeur que la position 2). Si je place un module sur, par exemple, En bas A et B ils doivent être 50/50. Si je place un module sur le bas A, B et C, ils auront chacun 1/3 de la largeur (comme sur l'image de position ci-dessous)

Jetez un oeil à ce fil de discussion: comment faire en sorte que les positions personnalisées s'empilent horizontalement plutôt que verticalement

Avec une petite modification apportée par le code indiqué dans ce fil de discussion, m’a donné 3 positions horizontales, mais elles n’étaient pas correctement alignées avec, par exemple, la position 2 et ne fonctionnaient pas selon mes souhaits.

<div class="row">
    <div class="bottom-a">
        <?php if ($this->countModules('position-9')) : ?>
             <!--custom position 9 'Bottom-A' -->
            <div id="top-2a" class="span3">
                <jdoc:include type="modules" name="position-9" style="xhtml" />
            </div>
             <!-- End Sidebar -->
            <?php endif; ?>
    </div>
    <div class="bottom-b">
        <?php if ($this->countModules('position-10')) : ?>
        <!--custom position 10 'Bottom-B' -->
            <div id="top-2b" class="span3">
                <jdoc:include type="modules" name="position-10" style="xhtml" />
            </div>
        <!-- End Sidebar -->
        <?php endif; ?>
    </div>
    <div class="bottom-c">
        <?php if ($this->countModules('position-11')) : ?>
        <!--custom position 11 'Bottom-C' -->
            <div id="top-2c" class="span3">
                <jdoc:include type="modules" name="position-11" style="xhtml" />
            </div>
        <!-- End Sidebar -->
        <?php endif; ?>
    </div>
</div>

enter image description here

enter image description here

Toute aide appréciée :)

module-display
2
Hammur

Explication:

Regardons ce que nous savons:

  • Bootstrap est un framework de grille de 12 colonnes
  • Vous essayez d'implémenter 3 cases, divisées en parts égales
<------------------------span12------------------------>
<------span4------><------span4------><-----span4------>
<----span3---><----span3---><----span3---><----span3--->

12 3 = 4

Solution:

Utilisation span4 au lieu de span3

3
Lodder