Jumbotron和導航

我想弄清楚如何讓我的導航坐在jumobtron的頂部，但仍然受限於有容器類。此外，我的h1和我想讓我的頭部中的h1和p也在容器內，但是我希望jumbotron在頁面寬度方向上是滿的。我沒有任何我自己的風格，這一切都來自引導。Jumbotron和導航

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Me - Web Designer/Developer</title> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link rel="stylesheet" type="text/css" href="css/style.css"> 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
     <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
     <![endif]--> 
    </head> 
    <body> 

     <header class="jumbotron"> 

      <nav class="navbar navbar-default navbar-fixed-top"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#services">Services</a></li> 
        <li><a href="#works">Works</a></li> 
        <li><a href="#about">About</a></li> 
        <li><a href="#contact">Contact</a></li> 
       </ul> 
      </nav> 

      <h1>Me</h1><p class="lead">Web Developer</p> 
     </header> 

     <div class="container"> 

      <section id="services"> 
       <h2 class="text-center">Services</h2> 
       <div class="row"> 
        ....

來源

2016-07-19 user3732216

這是相當不清楚你是什麼之後。你能把它分解嗎 - 聽起來你有很多事情需要幫助，但沒有一個很好的「問題」陳述，而且你試過的東西沒有什麼。 –

這是一個基本的例子。將導航欄更改爲background: transparent，將container放置在jumbotron的內部以及navbar的內部。

<header class="jumbotron"> 
    <div class="container"> 

    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container">

工作實例：

nav.navbar { 
 
    background: transparent; 
 
    border: 0; 
 
} 
 
@media (max-width: 767px) { 
 
    nav.navbar .navbar-collapse { 
 
    border: 0; 
 
    box-shadow: none; 
 
    } 
 
} 
 
header { 
 
    background-image: url('http://www.100resilientcities.org/page/-/100rc/img/cities/cities-la_optimized.jpg'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 400px; 
 
} 
 
header.jumbotron h1 { 
 
    padding-top: 100px; 
 
} 
 
header.jumbotron h1, 
 
header.jumbotron p { 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<header class="jumbotron"> 
 
    <div class="container"> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 

 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Brand</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#services">Services</a> 
 
      </li> 
 
      <li><a href="#works">Works</a> 
 
      </li> 
 
      <li><a href="#about">About</a> 
 
      </li> 
 
      <li><a href="#contact">Contact</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 

 
     </div> 
 
    </nav> 
 

 
    <h1>Me</h1> 
 
    <p class="lead">Web Developer</p> 
 

 
    </div> 
 
</header> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

來源

2016-07-19 16:18:54 vanburen

Jumbotron和Navbars是不同的東西，不應該把它放在另一個裏面。當你定義的導航類是導航欄固定頂，你的導航是從頁面的正常流動帶走，所以你想是這樣的：

<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#services">Services</a></li> 
       <li><a href="#works">Works</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div> 
    </nav> 

    <header class="jumbotron"> 
     <div class="container"> 
      <h1>Me</h1> 
      <p class="lead">Web Developer</p> 
     </div> 
    </header>

我相信這應該是足夠滿足您的需求。請確認是否不是。

來源

2016-07-19 15:09:30 Vee

非常感謝您的幫助，但是我想知道如何讓jumbotron將nav放在它的頂部，以便通過jumbotron可以看到文本，因爲我要將圖像放在裏面使用。 – user3732216

Jumbotron和導航

回答

相關問題