Bootstrap: Créer un template

Résolu/Fermé
YvesBe Messages postés 7 Date d'inscription mercredi 25 juillet 2018 Statut Membre Dernière intervention 27 octobre 2018 - 27 oct. 2018 à 15:08
YvesBe Messages postés 7 Date d'inscription mercredi 25 juillet 2018 Statut Membre Dernière intervention 27 octobre 2018 - 27 oct. 2018 à 19:32
Bonjour,

Je voudrais créer un template en bootstrap mais cela ne fonctionne pas comme je l'espérais. Où, plutôt, je n'arrive pas à obtenir le rendu que je désire.

j'aimerais avoir le rendu suivant


J'arrive a créer les zones 1,2 et 3 assez facilement et cela devrait être pareil pour les zones 13,14 et 15:
Un div de classe row, puis 3 div de classe col-md-* en fonction de mes besoins.

Ensuite, après avoir fermé tous mes divs, je recrée un div de type row pour assembler la zone 4, 6 et 5.

je pensais ensuite créer la zone 4 avec un div col-md-1 , et pareil pour la zone 5.
Je pensais ensuite créer la zone 6 avec un div-col-md10

Et c'est ici que ça ne fonctionne plus:

Naïvement, je voulais , a l'interieur de la zone 6 (div-col-md10) , créer un row qui m'aurait permis de rassembler les zone 7 a 11.

Mais on dirait que le row a cet endroit la ne fonctionne pas. Ou, si il fonctionne, ce sont les offset-* qui ne fonctionnent pas.

En html cela aurait produit le code suivant:

    
    <div class="">
            <div class="row">
                <div class="col-md-1">
                    ultratop gauche (1)
                </div>
                <div class="col-md-10 text-center">
                    ultratop centre (2)

                </div>
                <div class="col-md-1">
                    ultratop droit: (3)
                </div>
            </div>
            <div class="row">
                <div class="col-md-1">
                    marge gauche (4)
                </div>
                <div class="col-md-10">
                    content before (6)
                    
                    <div class="row">
                        contenu (before) (6)
                        <div class="col-md-6 offset2">
                            Bannière (7)
                        </div>
                        <div class="col-md-6 offset2">
                            Menu (8)
                        </div>
                        <div class="col-md-6 ">
                            breadcumb (9)
                        </div>
                        <div class="col-md-8 offset2">
                            A la une (10)
                        </div>
                        <div class="col-md-6 offset2">
                            Article  (11)
                        </div>
                    </div>
                    
                    
                </div>
                <div class="col-md-1">
                    marge droite (5)

                </div>            
            </div>
            <div class="row">
                <div class="col-md-1">
                    footer gauche (13)
                </div>
                <div class="col-md-10 text-center">
                    footer centre (14)

                </div>
                <div class="col-md-1">
                    footer droit: (15)
                </div>
            </div>
        </div>


Existe-t-il une solution pour résoudre mon problème ?

1 réponse

YvesBe Messages postés 7 Date d'inscription mercredi 25 juillet 2018 Statut Membre Dernière intervention 27 octobre 2018
27 oct. 2018 à 19:32
J'ai fini par trouver...
0