Fatal编程技术网
  • css/
  • Css 引导程序3使用网格列进行粘贴

Css 引导程序3使用网格列进行粘贴

css twitter-bootstrap twitter-bootstrap-3

Css 引导程序3使用网格列进行粘贴,css,twitter-bootstrap,twitter-bootstrap-3,navbar,affix,Css,Twitter Bootstrap,Twitter Bootstrap 3,Navbar,Affix,我正在使用Bootstrap3创建一个网站。我希望有一个导航栏，从横幅下方开始，使用.affix插件 在代码的第一个版本中，页面按预期滚动。向下滚动时，页面中的文本在导航栏的“下方”滚动： <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" cont

我正在使用Bootstrap3创建一个网站。我希望有一个导航栏，从横幅下方开始，使用
.affix
插件

在代码的第一个版本中，页面按预期滚动。向下滚动时，页面中的文本在导航栏的“下方”滚动：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }
  h1 {
      color:darkred
  }
  </style>
</head>
<body>

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>

</body>
</html>


引导示例
.粘贴{
排名：0；
宽度：100%；
}
.粘贴+.容器液体{
填充顶部：70px；
}
h1{
颜色：深色
}
引导粘贴示例

    

  • 

  • 

  • 

  • 


一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
然而，在第二个版本的代码中，我将文本放在一个容器中，然后放在一行中，最后是一个跨越所有12列的网格列。现在，当我向下滚动时，文本在导航栏上滚动。如何防止网格列中的内容在导航栏上滚动

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }
  h1 {
      color:darkred
  }
  </style>
</head>
<body>

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container">
<div class="row">
<div class="col-md-12">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>
</div>
</div>

</body>
</html>


引导示例
.粘贴{
排名：0；
宽度：100%；
}
.粘贴+.容器液体{
填充顶部：70px；
}
h1{
颜色：深色
}
引导粘贴示例

    

  • 

  • 

  • 

  • 


一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
这是一个z索引问题

只需添加这个css--

工作示例


.粘贴{
排名：0；
宽度：100%；
z指数：100；
}
.粘贴+.容器液体{
填充顶部：70px；
}
h1{
颜色：深色
}
引导粘贴示例

    

  • 

  • 

  • 

  • 


一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
请说明您使用的是哪个引导版本。 
 .affix {

  z-index:100;
   }