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 - 我怎么能有一个粘头？

回答

相关问题