ブートストラップ3グリッドカラムで貼り付け

私はブートストラップ3を使ってウェブサイトを作成しています。私は、バナーのすぐ下から開始され、.affixプラグインを使用してnavbarを開始したいと考えています。ブートストラップ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>

しかし、コードのこの第二のバージョンでは、私は最終的に、コンテナの内部、およびその行の中にテキストを配置し、、全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>

出典

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

ブートストラップ3グリッドカラムで貼り付け

答えて

関連する問題