0
モバイルビューでウェブサイトを表示しているときに問題が発生しました。実際には画面に留まりたいと思っています。あなたが見ることができるように、画像は実際にここに伸びています：Mobile versionBoostrap Mobile View Image Resize
私はデスクトップ版のような画面になりたいです。
/*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-->
それはほとんど働いていましたが、今はテキスト上に空白があります。 –
@JuriBorissonは新しい編集を見ます.. –