web-dev-qa-db-fra.com

Façon correcte d'ajouter du remplissage à Bootstrap corps pour éviter le chevauchement de contenu et d'en-tête

Je comprends que pour empêcher le conteneur principal dans Bootstrap d'être en haut du corps et derrière la barre de navigation, vous devez ajouter un rembourrage comme ceci:

<link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

Le rembourrage doit être déclaré entre le bootstrap.css et le bootstrap-responsive.css afin que le rembourrage ne cause pas de problèmes sur les petits appareils et ne brise donc pas la réactivité du site.

Ma question:

J'utilise le fichier combinde bootstrap.css téléchargé à partir de Bootstrap personnaliser , qui a le réactif et le css normal combinés en un seul fichier.

Parce qu'ils sont combinés en un seul fichier, cela signifie que je ne peux pas utiliser la solution que j'ai décrite au début de cette question sans ajouter le correctif dans le fichier bootstrap.css (je ne veux pas l'ajouter ici, longue histoire) .

Je pensais donc au lieu de mettre ce code (avec un correctif @media pour les petits appareils):

body {  padding-top: 60px; } 
@media (max-width: 979px) { body { padding-top: 0;  } }

dans mon propre fichier css (main.css) et en l'incluant après le bootstrap.css, dans le html, comme ceci:

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">


Pensez-vous que cette solution est acceptable?

twitter-bootstrapresponsive-designnavbar
33
Jamie Fearon

Oui, votre solution est acceptable.

Donc, si vous avez le ou les deux fichiers combinés Bootstrap au début et que vous souhaitez avoir la barre de navigation, c'est le moyen d'éviter le gros remplissage lorsque sur des écrans plus petits:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
  body {
    padding-top: 60px;
  }
  @media (max-width: 980px) {
    body {
      padding-top: 0;
    }
  }
</style>
43
Lipis

Dans Bootstrap 2.3.x, nous pouvons corriger ce remplissage avec CSS:

body > .container {
  padding-top: 40px;
  background-color: white;
}

/*
 * Responsive stypes
 */
@media (max-width: 980px) {

  body > .container {
    padding-top: 0;
  }
  .navbar-fixed-top {
    margin-bottom: 0;
  }

} /* END: @media (max-width: 980px) */

avec le fichier HTML ressemble à ceci

<html>
<body>

  <div class="navbar navbar-fixed-top">
   ...
  </div>

  <div class="container">
   ...
  </div>

</body>
</html>

Dans le fichier CSS responsice Twitter, la ligne de menu supérieure a class="navbar-fixed-top" avec margin-bottom: 20px; lorsque la largeur de l'écran est inférieure à 980px.

J'espère que cela peut aider quelqu'un.

3
Anton Danilchenko