web-dev-qa-db-fra.com

Devez-vous utiliser les termes "conteneur" et "ligne" de Bootstrap si votre contenu doit couvrir toute la largeur?

Je pense que la norme de Bootstrap 3 et 4 est

<div class="container">
    <div class="row">
        <div class="col-md-4"> ... </div>
        <div class="col-md-8"> ... </div>   <!-- just add up to 12 -->
    </div>
</div>

Mais que se passe-t-il si vous avez une div, table, form ou un élément quelconque que vous envisagez de laisser simplement couvrir toute la largeur? Dans ce cas, avez-vous besoin de la variable container ou row ou col-md-12 pour que la page entière s'affiche correctement conformément aux règles de style de Bootstrap 3 et 4?

P.S. si possible, veuillez indiquer ou citer les documents officiels Bootstrap relatifs à ce sujet.

twitter-bootstraptwitter-bootstrap-3bootstrap-4twitter-bootstrap-4
5
太極者無極而生

Réponse courte: vous do devez utiliser container, mais vous ne pas devez utiliser row.

Vous pouvez placer des éléments directement dans la variable container ou container-fluid. Vous n'êtes pas obligatoire pour utiliser la grille (.row et .col-*) et le conteneur seul peut être utilisé comme conteneur de contenu . Utilisez la grille uniquement lorsque vous avez besoin de la structure réactive de 12 unités.

Par exemple, ceci est valide Bootstrap ...

<div class="container">
   <h2>Hello World</h2>
   <p class="lead">Some other content...</p>
</div>

À partir du Documents Bootstrap ...

"Bootstrap nécessite un élément contenant pour envelopper le contenu du site et héberger notre système de grille."

Donc, container a un double objectif: 1) "héberger le système de grille", et 2) "emballer le contenu du site". Toutefois, lorsque vous utilisez la grille (.row et .col-*), un conteneur est obligatoire pour envelopper le .row.

Même le modèle de base de base utilise container sans la grille.

En résumé...

  • Vous pouvez utiliser .container ou .container-fluid seul pour contenir des éléments et le contenu de la page.
  • Si vous utilisez la grille (.row et .col-*), .row doit figurer dans un .container ou .container-fluid, et .col-* doit figurer dans un .row.
10
Zim

Vous devriez ajouter .container-fluid à votre division d'emballage. Vous devriez envelopper la table, le div ou le formulaire dans un div en y ajoutant la classe .container-fluid.

La documentation officielle de bootstrap sur le système de grille

3
neophyte

Vous devez utiliser la classe .container-fluid si vous souhaitez que votre contenu s'étende sur toute la largeur du document. Sans cette classe, les marges négatives de .row provoqueront un défilement horizontal.

Vous pouvez éventuellement omettre les container-fluid et row, mais cela peut entraîner des résultats inattendus lors de l'utilisation d'autres composants Bootstrap.

.col-md-4 {
  background: red;
}

.col-md-8 {
  background: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4"> ... </div>
    <div class="col-md-8"> ... </div>
  </div>
</div>
1
Turnip

Utilisez le conteneur de fluide pour couvrir toute la largeur du parent.

0
DawgOnKing