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

只需从样式

中删除位置即可

man ld

只需复制并通过此代码..

body {
      position: relative;
  }

<强> HTML

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;
    }

Answer 2

似乎是z-index问题。请查看此link

testFile

调整大小到平板电脑尺寸以下时，按钮无法点击

2 个答案: