Je suis nouveau à bootstrap, alors pardonnez toute ignorance flagrante à l'avance. Je n'arrive pas à me débarrasser du "rembourrage" (cercle rouge) autour du contenu à l'intérieur du code> étiquette dans la rangée 2, colonne 1 (carré bleu). Je ne comprends pas pourquoi cela se passe non plus. Comment puis-je me débarrasser du rembourrage indésirable et pourquoi ne se passe-t-il pas à la balise code>? Remarque: Ceci est reflété sur le côté droit (rembourrage indésirable). P > p> .Container-fluide code>. Je peux voir que le .Container-fluide code> utilise véritablement toute la largeur de l'écran (fond gris), mais tout à l'intérieur de celui-ci a un rembourrage que je ne peux pas me débarrasser, à l'exception du 
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="container-fluid" style="background-color: gray;">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="index.php" class="navbar-brand">%company name%</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-xs-1">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<p>left nav-bar</p>
</div>
<div class="col-xs-11">
<p>main content</p>
</div>
</div>
</div>
3 Réponses :
bootstrap a une charge de heep de styles prédéfinis, ajoutez simplement ! IMPORTANT À la fin de votre style de rembourrage
Padding: 0 !important; Margin: 0!important;
Toujours mettre Qu'est-ce que cela fait est qu'il remplacera tout style de CSS prédéfini - qui est dans ce cas provient du fichier bootstrap.css. < / p> ! IMPORTANT à votre code CSS.
La réponse est simple: vous n'avez pas à envelopper la barre de navigation dans un conteneur.
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="index.php" class="navbar-brand">%company name%</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" style="background-color: gray;">
<div class="row">
<div class="col-xs-1">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<p>left nav-bar</p>
</div>
<div class="col-xs-11">
<p>main content</p>
</div>
</div>
</div>Je sais que c'est un ancien post - mais merci. J'oublie toujours comment ces conteneurs coussinent les choses.
Pourquoi retirez-vous les marges de la rangée? Cela va briser le comportement de la grille prévu. En outre, il n'y a plus de col-x à bootstrap 4
Pour être complètement honnête, j'essayais juste diverses choses que je lisais en ligne pour le faire fonctionner. Comme je l'ai dit, Terminez NEWBIE. Dûment noté sur les col-xs, merci!