Les conteneurs de Bootstrap

Bonsoir tout le mode
à propos des conteneurs de Bootstrap, j'aimerais savoir si c'est possible de maître un conteneur dans un conteneur fluid c-à-d:

<div class="container-fluid"> <div class="container"> </div> </div>

vu que mettre un conteneur dans un conteneur ne se fait pas
Merci d'avance

Pourquoi veux-tu faire ça ? Quel intérêt ?

La documentation de Bootstrap au cas où – http://getbootstrap.com/css/#overview-container

Merci Freez de prendre un temps pour me répondre
je veux faire un arrière plan avec le container-fluid et puis mes div dans le container donc je veux savoir a ce que c'est possible de mettre ce dernier dans le premier (container-fluid)
Merci

Oui tout est possible
dans <div class="container-fluid"> <div class="container"><div class="row"><div class="col-sm-4 >
col-sm-4 n est pas défini par rapport a container ou container-fluid mais a row
si vous regarder le code css et car toutes les valeurs sont en % pour col-*-*, push pull offset mais pour des noms de propriétés différentes .
.container-fluid {
margin: 0 auto;
max-width: 970px;
padding-left: 20px;
padding-right: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.row { /* annule ? les padding du container !? */
margin-right: -15px;
margin-left: -15px;
}
Enfin quelques sélecteurs (compound / mix) utilisent container-fluid et container comme jumbotron et nav* le plus souvent au sein d'un MQ .Ainsi comment va fonctionner container ( row( container-fluid (row( col-sm-4 (.navbar-header) )))) dans se contexte ? tout est dans le terme CSS et la spécificité est la même [0,0,2,0].
Le mieux est que chacun des grid utilise leur propre nom de sélecteurs.
La combinaison va peut être créer des bandes qu il faudra gérer avec un override sur padding marging right left .
Modifié par 75lionel (14 Feb 2015 - 18:15)

Merci 75lionel de m'avoir répondu et pour le temps que vous m'avez offert
mais juste le dernier point j'ai pas bien saisie
Enfin quelques sélecteurs (compound / mix) utilisent container-fluid et container comme jumbotron et nav* le plus souvent au sein d'un MQ .Ainsi comment va fonctionner container ( row( container-fluid (row( col-sm-4 (.navbar-header) )))) dans se contexte ? tout est dans le terme CSS et la spécificité est la même [0,0,2,0].
Le mieux est que chacun des grid utilise leur propre nom de sélecteurs.
La combinaison va peut être créer des bandes qu il faudra gérer avec un override sur padding marging right left .

les framework CSS ne définisent pas seulement des propriétés CSS pour un sélecteur simple ( .container-fluid ou .container ) mais aussi des "sélecteurs" composés de plusieurs sélecteurs "simple unique" . Le code est dans le fichier css de Bootstrap .
Ainsi .container > .navbar-header est défini dans
@media (min-width: 768px) {
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}


ici la définition "simple"
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;
}
@media (min-width: 768px) { .navbar-header { float: left; }}

ici la définition "composé"
.container > .navbar-header,.{ margin-right: -15px; margin-left: -15px;}

le sigle > est une fonction/opérateur qui va sélectionner des nodes ( des parties du code HTML ) pour appliquer dessus les valeurs des propriétés CSS ( margin: -15px padding ...) . Le sigle est appelé un un sélecteur de combinaison ( combination) mais Il en existe plusieurs : espace " " , enfant ">" ,plus "+", tilde "~" . Ici le ">" signifie que la class navbar-header doit être contenu ( wrap) dans la class .container directement . Pour donnée une analogie avec la généalogie ; si on considère .container comme le père alors .navbar-header sont tous les fils ce ce père ( pas les fils de ses fils , ceux sont les fils qu il a eu directement .
+ se limite a sélectionner le premier fils
~ sélectionne pour un père son premier frère dans l ordre historique
" " sélectionne tous les descendant du père

compound est un terme utilisé par adobe pour dire qu'un sélecteur combine plusieurs sélécteurs : id , class , element html
http://www.digitalfamily.com/tutorials/css-selectors/

NB comprendre un Framework ( FW) sans CSS est possible tant que aucun problème apparait et que l on respecte les recommandations ( mode d emploi/ tutoriel ) du Framework . Dès que l on utilise de façon incorrecte le FW ; des problèmes apparaissent . Il faut alors regarder comment s applique les sélecteurs en utilisant l outil debug des navigateurs . firepath qui est un plug in Firefox est aussi utile pour savoir quelle partie du code html est sélectionnée par notre sélécteur ( compound) .
Rien de compliqué ... les bases de CSS avec spécificité et override

regarder le code des sites web utilisant bootstrap est aussi un moyen d apprendre
https://wappalyzer.com/categories/web-frameworks

Cdt
Modifié par 75lionel (16 Feb 2015 - 20:01)