Supprimer l'espace entre la barre de navigation et jumbotron Bootstrap 3
Il y a de l'espace entre ma barre de navigation et le jumbotron bootstrap 3. Il y a aussi l'espace entre le jumbotron et 3 vignettes horizontales. Je veux me débarrasser de cet espace. Dois-je changer le CSS et modifier le remplissage ou quelle est la meilleure façon de faire?
_Header
<nav class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="font-family:Webdings;">
<%= link_to "Project", root_path, class: 'navbar-brand' %>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><%= link_to "About", about_path %></li>
<li><%= link_to "Team", team_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><%= link_to "Action 1", about_path %></li>
<li><%= link_to "Action 2", about_path %></li>
<li><%= link_to "Action 3", about_path %></li>
<li><%= link_to "Action 4", about_path %></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Contact", contact_path %></li>
<li><%= link_to "Sign Up", register_path %></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav
À la maison (avec vignettes)
<%= provide(:title, "Home") %>
<div class="jumbotron">
<div class="container">
<h1>Welcome to club!</h1>
<p>blabla</p>
<p><a class="btn btn-primary btn-lg">Sign Up</a></p>
</div>
</div>
<div class="column">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://b2bleadblog.com/images/2007/05/18/huddlehands.jpg" alt="My Image" />
<div class="caption">
<h3>Blablabla</h3>
<p style="font-size:17px">Blablalbal.</p>
</div>
</div>
</div>
</div>
OriginalL'auteur megashigger | 2013-08-23
Vous devez vous connecter pour publier un commentaire.
Vous devez définir
margin-bottom:0;
ànavbar
etjumbotron
classes. Vous pouvez utiliser une feuille de style personnalisée pour remplacer ce. Utilisation de CSS personnalisé à côté du bootstrap css de référence. comme ci-dessous:Voir ce bootply exemple
OriginalL'auteur Ravimallya
Un moyen de supprimer l'espace entre le jumbotron et de la barre de navigation est de changer votre ligne:
Dans:
OriginalL'auteur Sheikh Hashir
Parfois, le problème est de l'espace supplémentaire dans le code HTML, essayez:
Remarque que j'ai enlevé deux
\n
entre les divs.Je voulais dire deux lignes vides (espaces, "entrer", "retour").
Pas de. espaces, le retour ou la difficile entrée ne donne pas de lignes supplémentaires ou des espaces dans le code HTML. S'il vous plaît être conscient de cela. Voir ma réponse ci-dessous.
OriginalL'auteur cortex