我有一个问题，当我在移动视图中查看网站时，它真的很伸展，我希望它留在屏幕上。正如您所看到的，图像确实在这里延伸：Mobile version
我想像桌面版一样在屏幕上。
/*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;
}
}
/*whitespace*/
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.navbar {
margin-bottom: 0px;
}
/*bildspel*/
.carousel {
height: 1000px;
margin-bottom: 70px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
height: 1000px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 1000px;
}
/*textstorlek.*/
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.carousel-caption i {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
/*Mer utrymme mellan bilderna.*/
.featurette-divider {
margin: 80px 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>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<!--Viktiga biblioteksfiler.-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--Din stil fil.-->
<link href="css/custom-style-sheet.css" rel="stylesheet">
<!--Mobil design.-->
<meta content="width=device-width, initial-scale=1" name="viewport">
<!--Information som används för sökmotorer.-->
<meta content="add text." name="description">
<meta name="keywords" content="Screen Brodyr i Kristianstad AB, Kristianstad, Skåne, brodyr, reklam, marknadsföring, kläder, design">
<meta name="author" content="Screen Brodyr i Kristianstad AB">
<title>Screen Brodyr i Kristianstad AB</title>
<body>
<!--Navigeringsfält.-->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<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">Screen Brodyr i Kristianstad AB</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="#varmetransfer">Värmetransfer</a>
</li>
<li><a href="brodyr.html">Brodyr</a>
</li>
<li><a href="#digitaltryck">Digitaltryck</a>
</li>
<li><a href="#tampotryck">Tampotryck</a>
</li>
<li><a data-toggle="modal" data-target="#kontaktoss">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Navigeringsfält slut.-->
<!--bildspel-->
<div id="bildspel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-target="#bildspel" data-slide-to="1"></li>
<li data-target="#bildspel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://puu.sh/reppZ/017e70e067.jpg" alt="Lokal">
<div class="container">
<div class="carousel-caption">
<h1>Välkommen till Screen Brodyr i Kristianstad AB!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="image/maskin.jpg" alt="Maskin">
<div class="container">
<div class="carousel-caption">
<h1>Text Dummy 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="http://puu.sh/reppZ/017e70e067.jpg" alt="lokal2">
<div class="container">
<div class="carousel-caption">
<h1>Text Dummy 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#bildspel" 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="#bildspel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--bildspel slut-->
答案 0 :(得分：0)
试试这个：
.carousel {
margin-bottom: 70px;
}
.carousel-inner > .item > img {
width:100%;
}
答案 1 :(得分：0)
新的更改是从.carousel移除高度并将此高度添加到.carousel .item {height：100vh;和.carousel-inner＆gt; .item＆gt; img {height：100vh！important;}
<img class="img-responsive" src="http://puu.sh/reppZ/017e70e067.jpg" alt="Lokal">
删除你的图像类bootstrap有一个默认的类“img-responsive”并设置css就像这样希望这会起作用
.carousel-inner > .item > img {
min-width:100%;
height:auto;
}
/*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;
}
}
/*whitespace*/
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.navbar {
margin-bottom: 0px;
}
/*bildspel*/
.carousel {
margin-bottom: 70px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
height:100vh;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100vh !important;
}
/*textstorlek.*/
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.carousel-caption i {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
/*Mer utrymme mellan bilderna.*/
.featurette-divider {
margin: 80px 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>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<!--Viktiga biblioteksfiler.-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--Din stil fil.-->
<link href="css/custom-style-sheet.css" rel="stylesheet">
<!--Mobil design.-->
<meta content="width=device-width, initial-scale=1" name="viewport">
<!--Information som används för sökmotorer.-->
<meta content="add text." name="description">
<meta name="keywords" content="Screen Brodyr i Kristianstad AB, Kristianstad, Skåne, brodyr, reklam, marknadsföring, kläder, design">
<meta name="author" content="Screen Brodyr i Kristianstad AB">
<title>Screen Brodyr i Kristianstad AB</title>
<body>
<!--Navigeringsfält.-->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<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">Screen Brodyr i Kristianstad AB</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="#varmetransfer">Värmetransfer</a>
</li>
<li><a href="brodyr.html">Brodyr</a>
</li>
<li><a href="#digitaltryck">Digitaltryck</a>
</li>
<li><a href="#tampotryck">Tampotryck</a>
</li>
<li><a data-toggle="modal" data-target="#kontaktoss">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Navigeringsfält slut.-->
<!--bildspel-->
<div id="bildspel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-target="#bildspel" data-slide-to="1"></li>
<li data-target="#bildspel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://puu.sh/reppZ/017e70e067.jpg" alt="Lokal">
<div class="container">
<div class="carousel-caption">
<h1>Välkommen till Screen Brodyr i Kristianstad AB!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>
</div>
</div>
</div>
<div class="item">
<img class="img-responsive" src="image/maskin.jpg" alt="Maskin">
<div class="container">
<div class="carousel-caption">
<h1>Text Dummy 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://puu.sh/reppZ/017e70e067.jpg" alt="lokal2">
<div class="container">
<div class="carousel-caption">
<h1>Text Dummy 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#bildspel" 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="#bildspel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--bildspel slut-->