0
私は自分のウェブページにブートストラップを使用していますが、大型デバイスではうまく動作しますが、小さなデバイスでチェックすると余分なスペースと水平スクロールが必要になります。この問題やグリッドの作成にテーブルを使用していると混乱します。あなたはライブのページが表示されたら、私はビューのための私のライブのウェブサイトのリンクを添付しています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エリアであるかどうかはわかりませんが、その水平スクロールを削除する方法を知りたいのですが –
テーブル内の 'table-condensed'クラスを試してみてください。 –