부트 스트랩 3 그리드 열 부착

부트 스트랩 3을 사용하여 웹 사이트를 만들고 있습니다. 배너 바로 아래에서 시작하는 navbar가 있고 .affix 플러그인을 사용하고 싶습니다.부트 스트랩 3 그리드 열 부착

이 코드의 첫 번째 버전에서는 페이지가 예상대로 스크롤됩니다. 네비게이션 바 "에서"페이지 스크롤의 텍스트 아래로 스크롤과 같이

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

그러나, 코드의 두 번째 버전, 드디어 용기의 내부에 텍스트를 배치하고 행의 내부 및 , 모든 열두 열에 걸친 그리드 열. 이제 아래로 스크롤하면 텍스트가 네비게이션 바 위를 스크롤합니다. 그리드 열의 내용을 탐색 막대의 "위"스크롤에서 유지하는 방법은 무엇입니까?

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

출처

2017-02-26 profj

사용중인 부트 스트랩 버전을 알려주십시오. –

그것은

그냥이

.affix { 

    z-index:100; 
    }

작업 예

<!doctype html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style> 
 
    .affix { 
 
     top: 0; 
 
     width: 100%; 
 
     z-index: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>

을 css-- 추가 Z 색인 문제입니다

출처

2017-02-26 08:51:08 neophyte

답변

관련 문제