Bonne façon d'ajouter un rembourrage pour Bootstrap corps pour empêcher le contenu d'en-tête et se chevauchent

Je comprends que pour arrêter le conteneur principal dans le Bootstrap d'être dans le haut du corps, et derrière la barre de navigation, vous devez ajouter le remplissage de la sorte:

<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 remplissage doivent être déclarées entre le bootstrap.css et bootstrap-responsive.css pour que le rembourrage de ne pas causer de problèmes sur les appareils de petite taille et donc la rupture de la réactivité du site.


Ma Question:

Je suis en utilisant le combinde bootstrap.fichier css chargé de Bootstrap personnaliser, qui a de la réactivité et de la normale css combiné en un seul fichier.

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

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

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

dans mon propre fichier css (principale.css) et y compris après le bootstrap.css, du html, comme ceci:

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


Pensez-vous de cette solution est acceptable?

InformationsquelleAutor Jamie Fearon | 2013-02-12