我正在编写一个网站，但我不确定为什么该网页能够稍微水平滚动。
HTML & CSS 代码如下:
<?php
// CSS Fil:
?>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Jquery css -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<!-- Fontawesome.io CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
body {
background-image: url("images/vortrex-bg.png");
background-size: cover;
}
.footer {
background: none;
}
.footer-p {
color: black;
}
.footer-link {
color: red;
}
.footer-link:hover {
text-decoration: none;
color: darkred;
}
.navbar-default {
background: grey;
border-color: grey;
}
.navbar-default .navbar-nav > li > a {
color: black;
text-align: center;
}
.navbar-default .navbar-nav > li > a:hover {
color: darkgrey;
}
.navbar-default .navbar-nav > li > a:focus {
color: none;
}
.navbar-default .navbar-nav .active > a,
.navbar-default .navbar-nav .active > a:hover {
color: black;
background: darkgrey !important;
}
.img-circle {
margin: -7px;
}
h3 .online-text {
color: green;
}
h3 .offline-text {
color: red;
}
</style><?php include('config/setup.php'); ?>
<!DOCTYPE html>
<html>
<header>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<?php include('config/css.php'); ?>
<?php include('config/js.php'); ?>
<title>Home | Vortrex</title>
</header>
<body>
<div class="row">
<div class="col-md-3">
<div class="side-box-left">
Teamspeak3 Class
<?php
/* try
{
// show server as online
echo "Server Status: online<br />\n";
echo "Server IP: " . $ts3->getAdapterHost() . ":" . $ts3->virtualserver_port . "<br />\n";
echo "Server Name: " . $ts3->virtualserver_name . "<br />\n";
echo "Server Uptime: " . TeamSpeak3_Helper_Convert::seconds($ts3->virtualserver_uptime) . "<br />\n";
echo "Server Version: " . TeamSpeak3_Helper_Convert::version($ts3->virtualserver_version) . "<br />\n";
echo "Current Clients: " . $ts3->virtualserver_clientsonline . " / " . $ts3->virtualserver_maxclients . "<br />\n";
}
catch(Exception $e)
{
// grab errors and show server as offline
echo "Server Status: offline<br />\n";
} */
?>
</div>
</div>
<div class="col-md-6">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<div class="navbar-header"><a class="navbar-brand" href="#"><img class="img-circle" alt="Brand" src="images/logo.png" height="32" width="32"></a></div>
<li class="active"><a href="index.php">Home</a></li>
<li><a href="statistik.php">Statistikker</a></li>
<li><a href="/forum">Forum</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav><!-- Slutningen af navbaren -->
<!-- Overskrift på forsiden! -->
<h1 align="center">Velkommen til Vortrex</h1>
<!-- Overskrift på forsiden! -->
<!-- I mellen <p> og </p> skrives hvad der skal stå på forsiden! -->
<br>
<br>
<h3 align="center">Nyheder</h1>
<p align="center">
<?php #SKRIV HERUNDER! ?>
<?php #SKRIV HEROVER! ?>
</p>
<!-- I mellen <p> og </p> skrives hvad der skal stå på forsiden! -->
</div>
<div class="col-md-3">
<div class="side-box-right">
<?php
$q = "SELECT * FROM server";
$r = mysqli_query($dbc, $q);
if($r) {
while ($rows = mysqli_fetch_assoc($r)) {
$online = $rows['online'];
$status = $rows['status'];
if($rows['status'] == 'online') {
echo "<h3 class='online-text'>$status:</h3> <h3>$online / 200</h3>";
echo "<h4>mc.vortrex.dk</h4>";
} else {
echo "<h3 class='offline-text'>$status</h3>";
echo "<h4>mc.vortrex.dk</h4>";
}
}
} else {
echo "<h2>Der skette en fejl</h2>";
echo "<br>";
echo "<h4>Kontakt et staff medlem!";
}
?>
</div>
</div>
</div>
<?php include(D_TEMPLATE.'/footer.php'); ?>
<!--<div id="console-debug">
Test debug window
</div>-->
</body>
</html>该网站是在我的本地主机上编程的，但如果您想在线查看它，您可以在 http://92.222.85.81/ 上找到它。
最佳答案
你是说水平滚动条吗？
它看起来像你的 .row不在 .container 内元素(假设它是 Bootstrap)。因为上课 row增加了负边距，它使该元素有点突出。 container元素(同样，假设这是 Bootstrap ，它看起来像)正确地反击。
所以尝试添加:
<div clsas="container"></div>
就在body之下在你身边 .row内容。
我推荐阅读 Bootstrap documentaiton .所有必要的类都在其中为您很好地列出。
“行必须放置在 .container(固定宽度)或 .container-fluid(全宽)内，以便正确对齐和填充。”
更新:关于问题的一个不相关的注释；你的meta , title , 和 link标签应该在 head 内标记而不是 header标签。
关于html - 垂直滚动条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36870629/