Кнопки не изменяются при изменении размера до размера табло

Question

Я хочу, чтобы его можно было щелкнуть во всех медиа-запросах. Пожалуйста, помогите исправить. Даже в w3schools кнопки не могут быть нажаты, когда ниже размера планшета.

Вот сайт образца 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

Кажется, г-индекс пробл Эм. Пожалуйста, проверьте этот link

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

Answer 2

Просто удалить позицию из стиля

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>