Question

您好我在移动视图中遇到Bootstrap问题。当我在移动视图中时，图像是响应的，但它对于页面来说很长，我必须滚动查看它的剪切。 Mobile view

我希望它能让整个图像适应＆＃34;。这是网站： http://edslab.esy.es/Screen-Brodyr-AB-master/index.html

＆＃13;

#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;
  }
}

/*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;
}

/* 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;
}

＆＃13;

<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>

        <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="transfertryck.html">Transfertryck</a>
                        </li>
                        <li><a href="brodyr.html">Brodyr</a>
                        </li>
                        <li><a href="#digitaltryck">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>
        <!--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://edslab.esy.es/Screen-Brodyr-AB-master/image/lokal.jpg" alt="Lokal">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1>Välkommen till Screen Brodyr i Kristianstad AB!</h1>
                            <p>
                                Vi bygger webbplats mer information kommer inom kort!</p>
                            <p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img class="second-slide" src="http://edslab.esy.es/Screen-Brodyr-AB-master/image/lokal2.jpg" alt="Maskin">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1>
Vi bygger webbplats mer information kommer inom kort!</h1>
                            <p>
                                Vi bygger webbplats mer information kommer inom kort!</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img class="third-slide" src="image/lokal2.jpg" alt="lokal2">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1>
Vi bygger webbplats mer information kommer inom kort!</h1>
                            <p>
                                Vi bygger webbplats mer information kommer inom kort!</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>

＆＃13;

Answer 1

删除height

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  //height: 1000px;
}

Answer 2

您好我明白您的问题是，当您在移动设备中打开您的网站时，我们必须滚动更多，所以请使用Bootstrap的课程.img-responsive

你可以这样试试

<img class="first-slide img-responsive" src="http://edslab.esy.es/Screen-Brodyr-AB-master/image/lokal.jpg" alt="Lokal">

并且滑块的高度更大，因此尺寸越小它将有助于您做出响应或不给div任何高度，图像使用自己的图像高度。

移动视图图像中的Bootstrap轮播

2 个答案: