在Bootstrap 3中移除導航欄和jumbotron之間的空間3

我的導航欄和bootstrap 3中的jumbotron之間有空間。jumbotron和3個水平縮略圖之間也有空間。我想擺脫這個空間。我是否必須更改CSS並更改填充或什麼是最佳方式？在Bootstrap 3中移除導航欄和jumbotron之間的空間3

_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

首頁的縮略圖模式

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

來源

2013-08-23 megashigger

-5

有時候問題是在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>

注意我刪除了t wo \n divs之間。

來源

2013-08-23 19:51:37 cortex

嘿對不起，你在哪裏看到這些「\ n」？ – megashigger

我的意思是兩個空行（空格，「輸入」，「返回」）。 – cortex

@cortex，編號空格，返回值或硬入口不會在HTML中提供任何額外的行或空格。請注意這一點。請參閱下面的答案。 – Ravimallya

您必須將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例如

來源

2013-08-27 05:28:58 Ravimallya

如果此答案解決了您的問題，您可以將其標記爲已接受的答案。 – Ravimallya

在Bootstrap 3中移除導航欄和jumbotron之間的空間3

回答

相關問題