Bootstrap 3 récipient de liquide n'est pas à 100% de la largeur
La question
Je pense à propos de la mise en œuvre de Bootstrap 3 dans mon projet et je suis en train de tester certaines de ses fonctionnalités et les propriétés avant de passer à cette frontal cadre.
L'étrange chose que j'ai remarqué, c'est qu'un fluide Bootstrap conteneur n'a pas de durée de 100% de la largeur de la fenêtre d'affichage (avis de l'1px ligne sur le droit de la rose Bootstrap élément):
image http://i58.tinypic.com/29lzrwl.png
C'est ce que mon code HTML ressemble. C'est essentiellement le défaut de Bootstrap modèle.
<!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>
Évidemment, je l'ai utiliser la norme, la dernière version CSS de bootstrap et de mon propre CSS personnalisé:
.full-width {
width: 100%;
background-color: #808080;
}
.col-md-3 {
background-color: #4f4;
}
.col-md-9 {
background-color: #f4f;
}
Pourquoi n'est-ce pas le récipient de liquide couvrant 100% de la largeur? Même si c'est juste 1px il va certainement briser ma conception de la page.
Problème de loisirs
J'ai créé un jsfiddle, sur demande, à ce propos: http://jsfiddle.net/J6UE5
Refaire mon problème de redimensionnement de la fenêtre d'affichage à l'aide de Safari (7.0.5) sur un Mac exécutant OS X 10.9.4.
Vous remarquerez la 1px ligne sur le côté droit de la rose conteneur apparaissant et disparaissant lors du redimensionnement. Une fois que le vert et le rose conteneurs sont empilés (Bootstrap comportement) la 1px ligne disparaît et tout est 100% de largeur.
OriginalL'auteur | 2014-07-26
Vous devez vous connecter pour publier un commentaire.
.container
élément ajoute un rembourrage de 15px dans le Bootstrap..row
négatives de marges gauche et droite de 15px, et.column
a 15px rembourrage.Remplacer les conteneurs les valeurs de remplissage dans votre CSS (et assurez-vous de placer après votre bootstrap code de sorte qu'il correctement remplace).
Plus d'explication sur la façon dont les conteneurs, les conteneurs de liquides, de lignes et de colonnes sont ici
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
OriginalL'auteur ahnbizcad
Avez-vous ajouté cette ligne dans votre fichier css spécifique !
/***********************************************************************************/
vous pouvez utiliser les médias de la requête.
OriginalL'auteur K.Raj.
essayer de recréer cette question et ne semble pas à
essayer de modifier le fichier de bootstrap css, bootstrap.css de bootstrap.min.css
edit: y at-il d'autres fichiers css, vous êtes en tirant d'un coup de http://www.bootply.com/OOpfKfAAMh montre son travail correctement, aucune 1px blanc de l'espace sur le côté
OriginalL'auteur Bosc
OriginalL'auteur Ray Sam
Veuillez utiliser le modifier lien expliquer comment ce code fonctionne et ne pas seulement donner le code, comme une explication est la plus probable pour aider les futurs lecteurs. Voir aussi Réponse.
OriginalL'auteur Asfack Ahamed