Question

我正在编写一个网站，但我不确定为什么该网页能够横向滚动。

HTML＆amp; 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>

该网站已在我的本地主机PC上编程，但如果您想在线查看，可以在http://92.222.85.81/上找到它

Answer 1

您的意思是水平滚动条吗？

看起来.row不在.container元素内（假设它是自举）。因为类row增加了负边距，所以它会稍微突破该元素。 container元素（再次，假设这是它看起来像它的引导程序）正确地计数。

所以尝试添加：

<div clsas="container"></div>

在所有body内容的.row下方。

我建议您阅读Bootstrap documentaiton。所有必要的课程都很适合你。

＆＃34;行必须放在.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充。＆＃34;

更新：与问题无关的说明;您的meta，title和link代码应位于head代码中，而不是header代码。

垂直滚动条？

1 个答案: