ジャンボトロンとナビゲーション

私は自分のナビゲーションがjumobtronのontopに座っても、コンテナクラスを持つように制限する方法を見つけようとしています。私のh1と私は私のh1とpを私のヘッダーの中に入れてコンテナの中に入れたいと思っていますが、ジャンボトロンをページの幅いっぱいに広げたいです。私は自分自身のスタイルはありません。すべてがブートストラップからです。ジャンボトロンとナビゲーション

<!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

ジャンボトロンとナバーバーは異なるものであり、内部に入れてはいけません。

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

私はこれがあるべきと信じて：あなたはナビゲーションバーに固定されたトップするNAVクラスを定義すると、あなたのナビゲーションは、あなたがこのような何かをしたいと思いますので、離れたページの通常の流れから取られますあなたのニーズに十分です。そうでない場合は教えてください。

出典

2016-07-19 15:09:30 Vee

あなたの助けてくれてありがとう、しかし、私はジャンボトロンにその上に座ってテキストをジャムトロンを通して見ることができるようにする方法があるのだろうと思っています。なぜなら、そこに使用するイメージを置くつもりだからです。 – user3732216

ジャンボトロンとナビゲーション

答えて

関連する問題