Comment ajouter un rembourrage pour Bootstrap 3 du conteneur sans vissage jusqu'à la grille?

Le site de nombreux modèles appel à un arrière-plan foncé avec un léger avant-plan de la page qui contient le contenu du site. Lors de l'utilisation de Bootstrap, il semble logique que l'on aurait simplement appliquer la couleur de la lumière à l' .div conteneur et être fait avec elle. Cependant, Bootstrap du conteneur ne fournit pas de rembourrage entre ses bords et les colonnes à l'intérieur, alors cette solution fournit un arrière-plan clair, mais avec le contenu de la colonne à ras des bords - pas un bon coup d'oeil.

C'est un problème commun et il y a plusieurs solutions sur stackoverflow et d'ailleurs pour Bootstrap 2, mais je ne pouvais pas trouver quelque chose d'utile pour Bootstrap 3.

InformationsquelleAutor jmcmichael | 2014-05-23
  1. 4

    L'un de l'Amorçage 2 solutions consiste à utiliser .conteneur de fluide qui passe à l'intérieur de la grille de pixels de pourcentage. Ensuite, on peut l'appliquer de rembourrage pour un fond div à l'intérieur .conteneur de fluide et les colonnes intérieures de manière transparente à ajuster en fonction. Cela semblait être une bonne approche, mais le CSS spécifiques utilisés pour modifier certains des autres styles ne fonctionne pas avec Bootstrap 3.

    Après creuser par le biais de l'Amorçage de la source, j'ai remarqué que la seule différence entre les .conteneur et .conteneur de fluide de règles, dans la grille.moins de trois requêtes de média. J'ai enveloppé mon contenu de la page dans .conteneur de fluide a ensuite annulé sa définition avec celle qui comprenait les requêtes de média, de sorte que le contenu de la page répondrai la même chose que l'en-tête et pied de page, utiliser la norme .conteneur.

    Voici le code HTML:

    <html>
<head>
  <title>Bootstrap 3 Container Padding Example</title>
</head>
<body>
  <div class="page-container">
    <div class="container-fluid">
      <div class="page-bg">
         <!-- PAGE CONTENT -->
      </div>
    </div>
  </div>
</body>
</html>

    Et la .moins:

    .page-container > .container-fluid:first-child {
  .container-fixed();

  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}

    Puis un rembourrage supplémentaire pour les .page-div conteneur:

    .page-container {
  .page-bg {
    padding: 15px;
    background-color: #EFEFEF;
  }
}

body {
  background-color: #333
}

    Cela semble fonctionner. Je n'ai pas terminé le style pour les interfaces qui se trouvent à l'intérieur de ce conteneur pourtant, il pourrait donc y avoir des problèmes sur la route, mais tout semble rendre bien loin.

    Voici un exemple de travail de cette solution sur codepen.io.

    Noter que la solution ci-dessus utilise de moins en moins.css à la suite notamment de Bootstrap variables et mixin .moins de fichiers. Voici la compilation des CSS:

    .page-container > .container-fluid:first-child {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .page-container > .container-fluid:first-child {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .page-container > .container-fluid:first-child {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .page-container > .container-fluid:first-child {
    width: 1170px;
  }
}
.page-container .page-bg {
  padding: 15px;
  background-color: #EFEFEF;
}
body {
  background-color: #333333;
}
    • Pour plus de clarté, ce qui est le but de l' .page-div conteneur? Merci!
    • J'ai utilisé .page-conteneur, un conteneur de mise en forme près de la racine de la page principale du modèle de l'application. C'est donc que si je veux avoir une page qui a de multiples horizontales types de mise en page, je peux mélanger dans la page conteneur des divs avec peut-être quelque chose comme des bannières conteneur des divs qui s'étendent sur toute la largeur de la page, au lieu de limiter la largeur de la requête de média points d'arrêt. Il n'est pas nécessaire d'inclure de cette technique fonctionne correctement.
    InformationsquelleAutor jmcmichael