-1
何らかの理由でヘッダーの画面の両側に空白があります。私はマージンとパディングを閉じようとしましたが、動作しません。また、どのようにリンクをブートストラップのナビゲーションバーに合わせるのですか？私はブートストラップコマンドとカスタムを試しましたが、それは中心にはなりません。HTMLヘッダーの空白
<!DOCTYPE html>
<html>
<head>
<!-- JavaScript compile -->
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<title>VE Website</title>
<meta charset="UTF-8">
<meta name="author" content="Joaquin Frommer">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html,body{
height: auto;
margin:0;
padding:0;
}
.carousel,.item,.active{
height: auto;}
.carousel-inner{
height: auto;}
.img{
height:auto; width:100%}
.navbar-default {
position: absolute;
left: 0;
right: 0;
width: 100%;
background-color: #e5b984;
z-index: 99999;
}
.navbar {
min-height: 20px;
}
.navbar-brand {
height: 20px; line-height: 20px;
}
.navbar-default .navbar-nav > li > a {
color: #703d41;
}
.nav-item:hover{
background-color: #fff0bb;
color: #703d41;
}
.nav-item{
font-size: 14px;
padding-left: 85px;
padding-right: 85px;
}
.navbar-nav li a {
line-height: 20px;
}
.navbar-header a {
line-height:20px;
}
.carousel{
position: relative;
}
header{
background-image: url(skyline.jpg);
left:0;
right:0;
width:100%;
}
h1{
margin:0;
padding:0;
right:0;
left:0;
width: 100%;
}
</style>
<script>
$('.carousel').carousel({
interval: 10000,
pause: "false",
wrap: "true"
});
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function(){
$wHeight = $(window).height();
$item.height($wHeight);
});
$item.eq(0).addClass('active');
});
</script>
<div class="container-fluid body">
<header>
<center>
<h1 class="img-responsive"><img style="margin: 0; padding: 0; background-position: center center;" src="logoNomad.png" height="97" width="97"></h1>
</center>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="fixedstuff">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">HOME</a></li>
<li class="nav-item"><a class="nav-link" href="#">ABOUT</a></li>
<li class="nav-item"><a class="nav-link"href="#">CHARITY</a></li>
<li class="nav-item"><a class="nav-link"href="#">RESERVE</a></li>
<li class="nav-item"><a class="nav-link"href="#">ACOUNTS</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="image2.jpg" data-color="lightblue" alt="First Image" class="img-responsive">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="image1.jpg" data-color="firebrick" alt="Second Image" class="img-responsive">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1024x700" data-color="firebrick" alt="Second Image" class="img-responsive">
<div class="carousel-caption">
<h3>Third image Image</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1024x700" data-color="firebrick" alt="Second Image" class="img-responsive">
<div class="carousel-caption">
<h3>Fourth Image</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1024x700" data-color="firebrick" alt="Second Image" class="img-responsive">
<div class="carousel-caption">
<h3>Fifth Image</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</html>here
コードスニペット機能を使用してください。 – kouljaboy