自舉導航和jumbotron之間的差距

對於我的生活，我無法確定導航和jumbotron之間的空白是從哪裏來的，我玩過很多變量，但無法讓它消失。我在這裏做了一個cssdeck http://cssdeck.com/labs/u6ws0ozl，我的代碼在下面（引導代碼省略）。自舉導航和jumbotron之間的差距

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<link href="shift.css" rel="stylesheet"> 
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet" /> 
<link href="style.css" rel="stylesheet" /> 
</head> 

<body> 
<nav class="navbar navbar-static-top" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> --> 
     <ul class="nav nav-pills pull-left"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     </ul> 
     <form class="navbar-form navbar-right navbar-custom pull-right" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav nav-pills pull-right"> 
     <li><a href="#">Log In</a></li> 
     <li><a href="#">Help</a></li> 
     </ul> 
    <!-- </div> /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
<div class="jumbotron"> 
     <div class="container"> 
     <h1>Find a place to stay.</h1> 
     <p>Rent from people in over 34,000 cities and 192 countries.</p> 
     <a href="#">Learn More</a> 
     </div> 
    </div> 
</body> 
</html>

CSS：

@charset "UTF-8"; 
/* CSS Document */ 

.navbar { 
    background-color: #2c3e50; 
} 

.nav-pills { 
    padding-top: 20px; 
    padding-bottom: 20px; 
    padding-right: 15px; 
    padding-left: 15px; 
    /*background-color: #2c3e50;*/ 
    /*background-color: #2ecc71;*/ 
} 

.nav > li > a:hover, 
.nav > li > a:focus { 
    text-decoration: none; 
    background-color: #2ecc71; 
} 

.nav-pills > li.active > a, 
.nav-pills > li.active > a:hover, 
.nav-pills > li.active > a:focus { 
    color: #fff; 
    background-color: #2ecc71; 
} 

.navbar-custom { 
    padding-top: 20px; 
} 

.nav a { 
    color: #fff; 
    font-size: 18px; 
    font-weight: bold; 
    font-family: 'Shift', sans-serif; 
    /*padding: 14px 14px;*/ 
    text-transform: uppercase; 
} 

.nav li { 
    display: inline; 
} 

.jumbotron { 
    background-image:url('http://goo.gl/04j7Nn'); 
    height: 500px; 
} 

.jumbotron .container { 
    margin-top: 0px; 
    position: relative; 
    top:100px; 
} 

.jumbotron h1 { 
    color: #fff; 
    font-size: 48px; 
    font-family: 'Shift', sans-serif; 
    font-weight: bold; 
} 

.jumbotron p { 
    font-size: 20px; 
    color: #fff; 
} 

.learn-more { 
    background-color: #f7f7f7; 
} 

.learn-more h3 { 
    font-family: 'Shift', sans-serif; 
    font-size: 18px; 
    font-weight: bold; 
} 

.learn-more a { 
    color: #00b0ff; 
} 

.neighborhood-guides { 
    background-color: #efefef; 
    border-bottom: 1px solid #dbdbdb; 
} 

.neighborhood-guides h2 { 
    color: #393c3d; 
    font-size: 24px; 
} 

.neighborhood-guides p { 
    font-size: 15px; 
    margin-bottom: 13px; 
}

來源

2014-06-21 SuperAdmin

卸下CSS/bootstrap.css以下

.navbar{ 
    margin-bottom: 20px; 
}

或者你也可以通過添加margin:0;來覆蓋它你自己的css文件：

.navbar { 
    background-color: #2c3e50; 
    margin:0; /*add this*/ 
}

Live demo

來源

2014-06-21 02:38:05 CMPS

是在你自己的CSS中覆蓋它，最好不要編輯這樣的庫。 –

@NickM正是如此，謝謝:) – CMPS

您必須刪除

.jumbotron{ 

    margin-bottom:20px; 
      }

，如果你的佈局是：
超大屏幕
（GAP）
導航欄
然後單獨刪除.navbar保證金將無法實現預期的效果as.jumbotron有margin-bottom：20px;

來源

2016-01-31 21:49:40

自舉導航和jumbotron之間的差距

回答

相關問題