Lid |
|
Beste,
ik ben bootstrap aan het leren.
Nu wil ik graag dat wanneer er op mobiel iemand komt de navigatie verdwijnt. In het voorbeeld op hun site gebeurd dit ook, echter gebeurd dit bij mij niet.
Kan iemand mij vertellen waarom?
Op desktop en tablet mag hij blijven, bij mobiel moet hij verdwijnen en moet de rest volledig beeld breedte nemen.
Mijn code hier:
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
ob_start();
session_start();
require_once('includes/config.php');
if($_SERVER['REMOTE_ADDR'] != '')
{
echo 'Website is momenteel in onderhoud, kijk snel nogmaals voor de vernieuwde website!';
exit;
}
?>
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/" />
<!-- bootstrap files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
</style>
<title></title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- end menu -->
<div style="display:block; height:70px;"></div>
<div class="container">
<div class="row">
<div class="col-md-8">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h2>Heading</h2>
<p>inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>
</html>
<?php error_reporting(E_ALL); ini_set('display_errors', '1'); ob_start(); session_start(); require_once('includes/config.php'); if($_SERVER['REMOTE_ADDR'] != '') { echo 'Website is momenteel in onderhoud, kijk snel nogmaals voor de vernieuwde website!'; exit; } ?> <!doctype html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- bootstrap files --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; } .sidebar-module { padding: 15px; margin: 0 -15px 15px; } .sidebar-module-inset { padding: 15px; background-color: #f5f5f5; border-radius: 4px; } .sidebar-module-inset p:last-child, .sidebar-module-inset ul:last-child, .sidebar-module-inset ol:last-child { margin-bottom: 0; } <nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="/"> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home </a></li> <li><a href="#about">About </a></li> <li><a href="#contact">Contact </a></li> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action </a></li> <li><a href="#">Another action </a></li> <li><a href="#">Something else here </a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header </li> <li><a href="#">Separated link </a></li> <li><a href="#">One more separated link </a></li> </nav> <!-- end menu --> <div style="display:block; height:70px;"></div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <p>inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier </p> <footer class="footer"> <p class="text-muted">Place sticky footer content here. </p> </footer>
|