1
你好，我在导航栏中的位置有问题。如果您看到黑色线条，看起来像是在一起，我希望上面的图片像导航栏一样伸展。传送带靠近导航栏，因此导航栏和传送带之间没有空间。Twitter-bootstrap横幅和图像位置
$('#topnavbar').affix({
offset: {
top: $('#banner').height()
}
});#topnavbar {
margin: 0;
}
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
}
/*.navbar-nav > li{
padding-left:30px;
padding-right:30px;
}
*/
/*navbar colour*/
.navbar-default {
background-color: #177f5e;
border-color: #ffffff;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #000000;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #000000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #000000;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #000000;
background-color: #ffffff;
}
.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #000000;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #000000;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #000000;
background-color: #ffffff;
}
}
/*bildspel*/
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
overflow:hidden;
}
.item.active img {
/*Hur lång bilden ska spelas*/
transition: transform 5000ms linear 0s;
transform: scale(1.05, 1.05);
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* scrollUp */
#scrollUp {
bottom: 20px;
right: 20px;
padding: 10px 20px;
background: #555;
color: #fff;
}
/*Google maps*/
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>
<div class="container" id="banner">
<img class="img-responsive center-block" src="http://puu.sh/ropPN/eb19c8f85b.jpg" alt="logo">
</div>
<!--Navigeringsfält.-->
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Om oss</a>
</li>
<li><a href="textiltryck.html">Textiltryck</a>
</li>
<li><a href="transfertryck.html">Transfertryck</a>
</li>
<li><a href="brodyr.html">Brodyr</a>
</li>
<li><a href="digitaltryck.html">Digitaltryck</a>
</li>
<li><a href="tampotryck.html">Tampotryck</a>
</li>
<li><a data-toggle="modal" data-target="#kontaktoss">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!--Navigeringsfält slut.-->
<!--bildspel-->
<br>
<div class="container">
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner carousel-zoom">
<div class="active item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="lokal">
<div class="carousel-caption">
<h2>Vi har en kapacitet av ca. 2-300 tryck i timmen.</h2>
<a href="textiltryck.html" class="btn btn-info" role="button">Läs mer</a>
</div>
</div>
<div class="item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="tampotryck">
<div class="carousel-caption">
<h2>Tampotryck (pad printing på engelska) inkluderar tre komponenter.</h2>
<a href="tampotryck.html" class="btn btn-info" role="button">Läs mer</a>
</div>
</div>
<div class="item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="brodyr">
<div class="carousel-caption">
<h2>Man kan få upp till 15 olika färger i en och samma brodyr.</h2>
<a href="brodyr.html" class="btn btn-info" role="button">Läs mer</a>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>
</div>
非常感谢你！你帮了我很多 – user6860260