conteneur de fluide et le côté rembourrage avec Bootstrap 3

Je veux que mon contenu de la page pour prendre toute la largeur de l'écran, avec un peu de rembourrage à droite et à gauche et à être fluide, mais quand je me div.row et div.col-md-x dans un <div class="container-fluid"> le contenu de la page touche les côtés de l'écran.

    <link href="css/bootstrap.min.css" >
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">

Quelle est la bonne, Bootstrap, pour avoir un 100% width, design fluide, et 15px rembourrage sur la gauche et la droite?

InformationsquelleAutor Andrew Koper | 2014-08-16
  1. 9

    Que par la Bootstrap docs: 

    Use .container-fluid for a full width container, spanning the entire width of your viewport.

    Si vous voulez 15px rembourrage puis l'ajouter à votre CSS:

    .container-fluid {
    padding: 15px;
}

    Cependant, vous souhaiterez peut-être utiliser un pour cent (padding: 2%) ou des requêtes de média depuis 15px seront différents sur différentes résolutions d'écran.

    Une autre option: utiliser <div class="container"> au lieu de <div class="container-fluid">. Cela vous donnera construit dans le rembourrage.

    Bootply démo

    • div.conteneur met le contenu de la page dans un centré, 1170px largeur de div avec beaucoup d'espace supplémentaire sur chaque côté
    • Ouais, j'ai réalisé que et mise à jour de ma réponse.
    • Bootstrap fait beaucoup de choses en commun pour vous, et cela semble une chose commune, je suis un peu abasourdi que vous avez à modifier son CSS pour atteindre cet objectif et il n'y a pas de pré-définie de la classe ou de quoi que ce soit.
    • Je suppose qu'ils vous donnent la container comme un construit en option avec un rembourrage, ou sinon, vous devez définir vous-même.
    InformationsquelleAutor Dan
  2. 1

    Vous pouvez essayer un id à <div id="bd" class="container-fluid"> et si ajouter ce script après ajouter Jquery vous pouvez rembourrage lorsque la fenêtre de redimensionnement, et peut ajouter plus de résolutions px avec plus de "si" ou seulement ajouter rembourrage gauche ou la droite.

    <script>
  $(document).ready(function(){

    function paddingbd(){
      if($(window).width()>800){
        $("#bd").css("padding","30px");
      }else{
        $("#bd").css("padding","");
      }
    }

    paddingbd();

    $(window).on("resize",paddingbd);

  });
<script>
    InformationsquelleAutor Raul Fernandez Marques
  3. 0

    la .row a une marge négative de 15px. essayez d'ajouter

    .container-fluid {
    padding: 15px 30px;
}
    InformationsquelleAutor Marc Anton Dahmen