Html 在 Bootstrap 3 中删除导航栏和大屏幕之间的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18410742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove space between navbar and jumbotron in Bootstrap 3
提问by megashigger
There is space between my navbar and the jumbotron in bootstrap 3. There is also space between the jumbotron and 3 horizontal thumbnails. I want to get rid of this space. Do I have to change the CSS and change the padding or what is the best way?
我的导航栏和引导程序 3 中的大屏幕之间有空间。大屏幕和 3 个水平缩略图之间也有空间。我想摆脱这个空间。我是否必须更改 CSS 并更改填充或最好的方法是什么？
_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
Home (with thumbnails)
主页（带缩略图）
<%= 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>
回答by Ravimallya
You have to set margin-bottom:0;to navbarand jumbotronclasses. You can use a custom stylesheet to override this. Use custom CSS next to the bootstrap css reference. as below:
你必须设置margin-bottom:0;为navbar和jumbotron类。您可以使用自定义样式表来覆盖它。在 bootstrap css 参考旁边使用自定义 CSS。如下：
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../css/CustomStyles.css" rel="stylesheet" type="text/css" />
See this bootplyexample
请参阅此引导示例
回答by Sheikh Hashir
A way to remove space between jumbotron and navbar is to change your line:
删除大屏幕和导航栏之间空间的一种方法是更改您的行：
<div class="navbar navbar-default">
Into:
进入：
<div class="navbar navbar-default navbar-fixed-top">
回答by cortex
Sometimes the problem is the extra space in the HTML, try:
有时问题是 HTML 中的额外空间，请尝试：
<div class="jumbotron">
...
<p><a class="btn btn-primary btn-lg">Sign Up</a></p>
</div>
</div>
<div class="column">
<div class="col-xs-4">
...
</div>
Note that I removed two \nbetween divs.
请注意，我\n在 div 之间删除了两个。
