Bootstrap - 我怎麼能有一個粘頭？

-3

我想知道我怎麼可以有一個粘頭？我一直在搞清楚，整整一天，仍然不知道該怎麼做。任何人都可以幫我嗎？我想要的是，當我向下滾動時，標題將繼續粘在頂部。Bootstrap - 我怎麼能有一個粘頭？

這些是我的代碼。非常感謝！

header { 
 
    padding: 20px 0; 
 
} 
 

 
header .row, 
 
footer .row { 
 
    display: flex;  
 
    align-items: center; 
 
} 
 

 
header h1 { 
 
    font-weight: 700; 
 
    margin: 0; 
 
} 
 

 
header nav { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 

 
header p { 
 
    padding: 0 20px; 
 
    margin: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Bo Kei Tuck Shop</title> 
 
     <meta charset="utf-8" /> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
 
     <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API--> 
 
     <link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS--> 
 
     <script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery--> 
 
     <script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery--> 
 
     <meta name="description" content="Free Web tutorials"> <!--meta description--> 
 
     <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords--> 
 
     <meta name="content-language" content="en-US"> 
 
    </head> 
 

 
    <body> 
 
<!--header--> 
 
     <header class="container"> 
 
      <div class="row"> 
 
       <h1 class="col-sm-4">Bo Kei Tuck Shop</h1> 
 
       <nav class="col-sm-8"> 
 
        <p>Hot Food</p> 
 
        <p>Cold Food</p> 
 
        <p>Snacks</p> 
 
        <p>Drinks</p> 
 
        <p>Contact Us</p> 
 
       </nav> 
 
      </div> 
 
     </header> 
 

 
     </body>

來源

2016-08-24 Jimmy Wong

這是在文檔中 - https://getbootstrap.com/components/#navbar-fixed-top –

https://getbootstrap.com/examples/navbar-fixed-top /只需將'navbar-fixed-top'類添加到'nav'標記。 –

@MoshFeu但是，我的導航標籤中有

試試這個

<nav class="navbar navbar-fixed-top">

Click here for bootstrap proper navigation

來源

2016-08-24 10:42:14

有一種方法可以按照給定的鏈接創建一個導航欄 –

但是，我的代碼中已經有

你可以像這樣使用

看一看

body{height:20000px}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Bo Kei Tuck Shop</title> 
 
     <meta charset="utf-8" /> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
 
     <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API--> 
 
     <link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS--> 
 
     <script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery--> 
 
     <script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery--> 
 
     <meta name="description" content="Free Web tutorials"> <!--meta description--> 
 
     <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords--> 
 
     <meta name="content-language" content="en-US"> 
 
    </head> 
 

 
    <body> 
 
<!--header--> 
 
     <header class="container"> 
 
      <div class="row"> 
 
       <nav class="navbar navbar-fixed-top"> 
 
       <div class="navbar-header"> 
 
       <a class="navbar-brand" href="#">Bo Kei Tuck Shop</a> 
 
       </div> 
 
        <ul class="nav navbar-nav"> 
 
        <li><a href="#">Hot Food</a></li> 
 
        <li><a href="#">Cold Food</a></li> 
 
        <li><a href="#">Snacks</a></li> 
 
        <li><a href="#">Drinks</a></li> 
 
        <li><a href="#">Contact Us</a></li> 
 
       </ul> 
 
       </nav> 
 
      </div> 
 
     </header> 
 

 
     </body>

來源

2016-08-24 10:55:13

Plz在完整頁面模式下查看此內容 –

你可以用你的div和nav與另一div並設置它就像在文檔（navbar navbar-default navbar-fixed-top）類。

像這樣：

body { 
 
    height:1500px; 
 
} 
 

 
header { 
 
    padding: 20px 0; 
 
} 
 

 
header .row, 
 
footer .row { 
 
    display: flex;  
 
    align-items: center; 
 
} 
 

 
header h1 { 
 
    font-weight: 700; 
 
    margin: 0; 
 
} 
 

 
header nav { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 

 
header p { 
 
    padding: 0 20px; 
 
    margin: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Bo Kei Tuck Shop</title> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
 
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API--> 
 
    <link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS--> 
 
    <script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery--> 
 
    <script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery--> 
 
    <meta name="description" content="Free Web tutorials"> <!--meta description--> 
 
    <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords--> 
 
    <meta name="content-language" content="en-US"> 
 
    </head> 
 

 
    <body> 
 
    <!--header--> 
 
    <header class="container"> 
 
     <div class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="row"> 
 
      <h1 class="col-sm-4">Bo Kei Tuck Shop</h1> 
 
      <nav class="col-sm-8"> 
 
      <p>Hot Food</p> 
 
      <p>Cold Food</p> 
 
      <p>Snacks</p> 
 
      <p>Drinks</p> 
 
      <p>Contact Us</p> 
 
      </nav> 
 
     </div> 
 
     </div> 
 
    </header> 
 

 
    </body>

來源

2016-08-24 10:58:39

Bootstrap - 我怎麼能有一個粘頭？

回答

相關問題