在 Bootstrap 3 中删除导航栏和 jumbotron 之间的空间答案

【问题标题】：Remove space between navbar and jumbotron in Bootstrap 3在 Bootstrap 3 中删除导航栏和 jumbotron 之间的空间
【发布时间】：2019-02-01 08:43:40
【问题描述】：

在我的导航栏和引导程序 3 中的 jumbotron 之间有空间。jumbotron 和 3 个水平缩略图之间也有空间。我想摆脱这个空间。我是否必须更改 CSS 并更改填充或最好的方法是什么？

_标头

<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

首页（带缩略图）

<%= 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>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

您必须将 margin-bottom:0; 设置为 navbar 和 jumbotron 类。您可以使用自定义样式表来覆盖它。在引导 css 参考旁边使用自定义 CSS。如下：

  <link href="../css/bootstrap.css" rel="stylesheet" type="text/css" /> 
  <link href="../css/CustomStyles.css" rel="stylesheet" type="text/css" />

查看此bootply 示例

【讨论】：

【解决方案2】：

删除 jumbotron 和导航栏之间空间的一种方法是更改行：

<div class="navbar navbar-default">

进入：

<div class="navbar navbar-default navbar-fixed-top">

【讨论】：

【解决方案3】：

有时问题是 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>

请注意，我在 div 之间删除了两个 \n。

【讨论】：

嘿，抱歉，您在哪里看到这些“\n”？
我的意思是两个空行（空格、“enter”、“return”）。
@cortex，无空格、回车或硬输入不会在 HTML 中给出任何额外的行或空格。请注意这一点。请参阅下面的答案。