タブレットのサイズより小さいサイズにリサイズするとボタンがクリックできない

Question

すべてのメディアクエリでクリックすることができます。修正してください。 w3schoolでも、タブレットサイズ以下ではボタンをクリックできません。ここで

は、W3Schoolsのサンプルのウェブサイトである：ここでhttp://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy2&stacked=h

は、CSSコードです。

body { 
     position: relative; 
    } 
    ul.nav-pills { 
     top: 300px; 
     position: fixed; 
    } 
    div.col-sm-9 div { 
     height: 250px; 
     font-size: 28px; 
    } 

    #account_register {color: #fff; background-color: #1E88E5;} 
    #login_logout {color: #fff; background-color: #673ab7;} 
    #buying_process {color: #fff; background-color: #ff9800;} 


    @media screen and (max-width: 810px) { 
    #account_register, #login_logout, #buying_process, #business_register, #upload_product, #sort_product, #sort_orders, #permission_management, #communicate { 
     margin-left: 150px; 
    } 

ここはhtmlコードです。

<div class="container"> 
    <div class="row"> 
     <!--<div class="col-sm-6"><img src="images/test.png"></div><div class="col-sm-6"><span class="pull-center"><img src="images/test.png"></span></div>--> 
     <div class="col-sm-12"> 

<nav class="col-sm-3" id="myScrollspy"> 
    <ul class="nav nav-pills nav-stacked"> 
    <li><a href="#account_register">account_register</a></li> 
    <li><a href="#login_logout">login_logout</a></li> 
    <li><a href="#buying_process">buying_process</a></li> 

    </ul>   
     </ul> 
    </li> 
    </ul> 
</nav> 
<div class="col-sm-9"> 
    <div id="account_register">  
    <h1>buying_process</h1> 
    <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
    </div> 

    <div id="login_logout"> <hr> 
    <h1>login_logout</h1> 
    <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
    </div> 

    <div id="buying_process"> <hr> 
    <h1>buying_process</h1> 
    <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
    </div> 




</div> 

Answer 1

がzインデックスproblらしいスタイル

body { 
     position: relative; 
    } 

から位置を削除em。同じのために私の答え怒鳴るを確認してください何もありません。このlink

ul.nav-pills { 
     top: 20px; 
     position: fixed; 
     z-index:1; 
    } 

Answer 2

ただ単にコピーして、このコードを過ぎて...

ul.nav-pills { 
     top: 300px; 
     position: fixed; 
    } 
    div.col-sm-9 div { 
     height: 250px; 
     font-size: 28px; 
    } 

    #account_register {color: #fff; background-color: #1E88E5;} 
    #login_logout {color: #fff; background-color: #673ab7;} 
    #buying_process {color: #fff; background-color: #ff9800;} 


    @media screen and (max-width: 810px) { 
    #account_register, #login_logout, #buying_process, #business_register, #upload_product, #sort_product, #sort_orders, #permission_management, #communicate { 
     margin-left: 150px; 
    } 

HTML

<div class="container"> 
    <div class="row"> 
     <!--<div class="col-sm-6"><img src="images/test.png"></div><div class="col-sm-6"><span class="pull-center"><img src="images/test.png"></span></div>--> 
     <div class="col-sm-12"> 

<nav class="col-sm-3" id="myScrollspy"> 
    <ul class="nav nav-pills nav-stacked"> 
    <li><a href="#account_register">account_register</a></li> 
    <li><a href="#login_logout">login_logout</a></li> 
    <li><a href="#buying_process">buying_process</a></li> 

    </ul>   
     </ul> 
    </li> 
    </ul> 
</nav> 
<div class="col-sm-9"> 
    <div id="account_register">  
    <h1>buying_process</h1> 
    <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
    </div> 

    <div id="login_logout"> <hr> 
    <h1>login_logout</h1> 
    <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
    </div> 

    <div id="buying_process"> <hr> 
    <h1>buying_process</h1> 
    <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
    </div> 




</div>