Question

我正在为我的网页使用bootstrap，它在大型设备中完美运行但是当我在小型设备中检查时，我可以看到额外的空间和不需要的水平滚动。如果我正在使用的表创建此问题或我的网格，我很困惑。我附上我的实时网站链接以查看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>

Answer 1

默认情况下，最小大小是bootstrap的宽度是320px。您需要了解用于查看所需网站的设备和浏览器的特征。尝试通过在线网络移动测试或其他工具了解设备的原生屏幕分辨率和测试结果。

Answer 2

使用＆＃39; table-condensed＆＃39;表中的类

窗口在小型设备中没有响应

2 个答案: