Bootstrap - 我怎样才能有一个粘性标题？答案

【问题标题】：Bootstrap - how can I have a sticky header?Bootstrap - 我怎样才能有一个粘性标题？
【发布时间】：2016-12-31 10:52:44
【问题描述】：

我想知道如何才能有一个粘性标题？我一直在想一整天，但仍然不知道该怎么做。任何人都可以帮助我吗？我想要的是，当我向下滚动时，标题将保持在顶部。

这些是我的代码。非常感谢！

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>

【问题讨论】：

在文档中 - getbootstrap.com/components/#navbar-fixed-top
getbootstrap.com/examples/navbar-fixed-top 只需将navbar-fixed-top 类添加到nav 标记。
@MoshFeu 但是，我的导航标签中有
，我如何将标题与
博基小卖部
?

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

您可以用另一个div 包装您的div 和nav，并像在文档中一样设置它的类 (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>

【讨论】：

【解决方案2】：

看看

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>

【讨论】：

请以全页模式查看

【解决方案3】：

试试这个

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

Click here for bootstrap proper navigation

【讨论】：

有一种方法可以按照给定的链接创建导航
但是，我的代码中已经有
......我该怎么做？
你可以这样使用
那个类 .navbar-fixed-top 使元素固定在顶部