web-dev-qa-db-fra.com

Conteneur de fluide Bootstrap 3 non 100% largeur

Le problème

Je songe à implémenter Bootstrap 3 dans mon projet et je teste certaines de ses fonctionnalités et propriétés avant de passer à ce framework frontal.

La chose étrange que j'ai remarquée est qu'un conteneur Bootstrap fluide ne couvre pas 100% de la largeur de la fenêtre d'affichage (remarquez la ligne 1px à droite de l'élément Bootstrap rose):

image http://i58.tinypic.com/29lzrwl.png

Voici à quoi ressemble mon code HTML. C'est fondamentalement le modèle Bootstrap par défaut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page title</title>
        <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
        <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="full-width">This is not bootstrap</div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    This is Bootstrap
                </div>
                <div class="col-md-9">
                    This is Bootstrap too
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

J'utilise évidemment la dernière version CSS standard de bootstrap et mon propre CSS personnalisé:

.full-width {
    width: 100%;
    background-color: #808080;
}
.col-md-3 {
    background-color: #4f4;
}
.col-md-9 {
    background-color: #f4f;
}

Pourquoi ce réservoir de fluide ne couvre-t-il pas 100% de la largeur? Bien que ce ne soit que 1px, ma page sera définitivement brisée.

Problème de loisirs

J'ai créé un jsfiddle sur demande concernant ce problème: http://jsfiddle.net/J6UE5

Pour recréer mon problème, redimensionnez la fenêtre d'affichage à l'aide de Safari (7.0.5) sur un Mac exécutant OS X 10.9.4 . Vous remarquerez que la ligne 1px située à droite du conteneur rose apparaît et disparaît pendant le redimensionnement. Une fois les conteneurs vert et rose empilés (comportement Bootstrap), la ligne 1px disparaît et tout est à 100% de la largeur.

csstwitter-bootstrapwidthcontainersfluid-layout
9
user3879583

L'élément .container ajoute un remplissage de 15 pixels dans Bootstrap.

.row a des marges gauche et droite négatives de 15px, et 

.column a 15px padding. 

Remplacez les valeurs de remplissage des conteneurs dans votre CSS (et assurez-vous de les placer après votre code boostrap afin qu'il soit correctement écrasé).

.container { 
  padding: 0px;
}

Plus d'explications sur la façon dont les conteneurs, les fluides de conteneur, les lignes et les colonnes fonctionnent ici

http://www.helloerik.com/the-subtle-magic-hind-why-the-bootstrap-3-grid-works

14
ahnbizcad

en essayant de recréer cette question et ne peut pas sembler 

essayez de changer le css bootstrap, bootstrap.css à bootstrap.min.css

edit: existe-t-il d'autres fichiers CSS que vous extrayez dans un rapide http://www.bootply.com/OOpfKfAAMh montre que tout fonctionne correctement, sans espace blanc de 1 pixel sur le côté

0
Bosc

Avez-vous ajouté cette ligne dans votre fichier css personnalisé! 

body {
       width: 100%;
       margin: 0%;    
}

/ *********************************************** ************************************* /

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page title</title>
        <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
        <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            .full-width {
                max-width:100%;
                top:0;
                left:0;
                min-height: 100%;
                min-width: 1024px;
                background-color: #808080;
            }
            .col-md-3 {
                background-color: #4f4;
            }
            .col-md-9 {
                background-color: #f4f;
            }

            body {
                width: 100%;
                margin: 0%;
            }
        }
    </style>

    </head>
    <body>
        <div class="full-width">This is not bootstrap</div>
        <div class="container-fluid">
            <div class="col-md-12">
            <div class="row">
                <div class="col-md-3">
                    This is Bootstrap
                </div>
                <div class="col-md-9">
                    This is Bootstrap too
                </div>
            </div>
        </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>
0
K.Raj.
 <div class="row" style="margin-left: -30px; padding: 0px;  background-color: rgba(255, 3, 53, 0.49);">
     <div class="col-lg-12">
           <p style="color: green;">Foo</p>
         </div>
</div>
0
Ray Sam