窗口没有得到响应在小设备

问题描述：

我使用引导为我的网页，它在大型设备完美的作品，但它当我检查它在小设备，我可以看到额外的空间和水平滚动这是不需要的。我很困惑，如果我使用的表格创建这个问题或我的网格。我附上我的实时网站链接查看App 窗口没有得到响应在小设备

当你看到实况页面，在小宽度屏幕有水平滚动，我没有得到如果表溢出或div区域，它只是我想知道如何以去除水平滚动

并且还提供我的代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>God Among Computers</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial- 
    scale=1"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="icon" href="images/favicon.png" type="image/x-icon"/> 
    <script src="script/script.js"></script> 
    <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.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 


    </head> 
    <body background="images/bg.jpg"> 
    <div class="container"> 
     <nav style = "background-color: #2980b9; border-color: none;" 
     class="navbar navbar-default"> 
     </nav> 
    <div class="row"> 
    <div class="col-md-2 col-xs-12"> 

    </div> 
    <div class="col-xs-12 col-md-8"> 
     <div class="row"> 
      <div style="background-color: white;" class="col-xs-7"> 
       <div class="row" style="padding: 5px;"> 
        <center> 
        <h1>I can <img style="width:10%" class="img-responsive" src="images/read.png"> your Mind</h1></center> 
        <h4>How it works</h4> 
        <ul > 
         <li style="font-family: 'fonarto'">Take a two digit number, Example : 34 </li> 
         <li style="font-family: 'fonarto'">Add the digits. Example: 3+4=7</li> 
         <li style="font-family: 'fonarto'">Subtract the sum from original number. Example: 34-7=27</li> 
         <li style="font-family: 'fonarto'">Search this number in emoticon table.</li> 
         <li style="font-family: 'fonarto'">Remeber the symbol next to your result.</li> 
         <li style="font-family: 'fonarto'">Concentrate on the found emoticon.</li> 
         <li style="font-family: 'fonarto'">Click on the mind icon to be amazed.</li> 
         <li style="font-family: 'fonarto'">Want more? Click on Try Again</li> 
         </ul> 

        <center> 
         <img id="result" class="img-responsive" style="display: none;"><br> 

          <img class="img-responsive" id="refresh" src="images/tryagain.jpg" style="width: 50%; display: none" onclick="window.location.reload();"> 
          <div id="btn"> 
          <span style="font-family: 'fonarto'"> 
      <b>Click Me !!</b></span> 

         <img class="img-responsive" src="images/mind.png" style="width: 50%;"></div> 


        </center> 


       </div> 

     </div> 
     <div class="col-xs-5"> 
     <table class="table table-responsive table-sm" style="background-color:white;"> 
        <?php 

         $symbol = ['1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png']; 
         shuffle($symbol); 
         echo '<tbody><tr>'; 
         for ($i=1; $i <= 100; $i++) { 
           if ($i%9==0) { 
            echo '<td id = '.$i.'>'.$i.': <img src=images/symbol/'.$symbol[0].'></td>'; 
           } 
           else{ 
            echo '<td id = '.$i.'>'.$i. ': <img src=images/symbol/'.$symbol[$i%10].'></td> '; 
           } 

           if($i%5==0){ 
            echo'</tr><tr>'; 
           } 
         } 
         echo '</tbody>'; 
        ?> 
        </table> 
      </div> 
    </div> 
</div> 
    <div class="col-md-2 col-xs-12"> 
     <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<!-- Auto Responsive --> 
         <ins class="adsbygoogle" 
          style="display:block" 
          data-ad-client="ca-pub-4256692395717993" 
          data-ad-slot="2241707869" 
          data-ad-format="auto"></ins> 
         <script> 
          (adsbygoogle = window.adsbygoogle || []).push({}); 
         </script> 
    </div> 


    </div> 
    </div> 

    </body> 
    </html>

请你能告诉哪些额外的空间，我们都在谈论 –

当你看到直播页面，在小宽屏幕有水平滚动，我没有得到，如果表溢出或div区域，它只是我想知道如何删除水平滚动 –

尝试使用'表精简'类在表 –

答

使用“表凝结”级

thnx为投票 –

答

通过默认的最小尺寸，该尺寸的自举的宽度为320像素。您需要了解用于查看所需网站的设备和浏览器的特征。尝试了解什么是设备的本机屏幕分辨率以及使用网络移动测试或其他工具进行测试。在表

窗口没有得到响应在小设备

相关推荐