图片未正确显示在网页

时间:2015-07-17 17:04:34

标签: image twitter-bootstrap mobile device

我是全新的bootstrap。我在Bootstrap 3.0中创建了一个网站。 该网站在我的笔记本电脑上正常工作。但是当我托管该网站时,一些图像没有加载到网页中。而且当我尝试在移动设备中打开网站时,轮播图像不适合旋转木马,我的意思是它留下一些空白空间,它不会覆盖整个旋转木马空间。在移动设备上加载网站时,背景图像也不完全适合屏幕。请帮帮我,我完全卡住了。我的网址网址为WWW.krishzone.com

我的代码是

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Krishh Kidss Zone</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">



<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">



<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>
<body style="background: url(../img/background1.png) no-repeat center center fixed"
style="-webkit-background-size: cover"
style="moz-background-size: cover"
style="-o-background-size: cover"
style="background-size: cover">
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top " role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">Krishh Kidss Zone</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="about.html">About Us </a>
            </li>
            <li><a href="whykrishkids.html">Why Krishh Kidss</a>
            </li>
            <li><a href="admission.html">Admissions</a>
            </li>
            <li><a href="events.html">Events</a>
            </li>
            <li><a href="gallery.html">Gallery</a>
            </li>
            <li><a href="achivements.html">Achivements</a>
            </li>
            <li><a href="contact.html">Contact Us</a>
            </li>

        </ul>
        </div>
    </div>
</div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
    <!-- 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>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <div class="item active">
            <img src="../img/school.jpg" alt="learn" style="max-width:100%" style="height:auto" class="img-responsive">
            <div class="carousel-caption">
                <h2>Krishh Kidss Zone...</h2>
            </div>
            </div>
        <div class="item">
            <img src="../img/learning.JPG" alt="Fun" style="max-width:100%" style="height:auto" class="img-responsive">
                <div class="carousel-caption">
                <h2>Where Learning is...</h2>
            </div>
        </div>
        <div class="item">
            <img src="../img/playing.jpg" alt="play" style="max-width:100%" style="height:auto" class="img-responsive">
            <div class="carousel-caption">
                <h2>Fun</h2>
            </div>
        </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
</header>

<!-- Page Content -->
<div class="container">

    <!-- Marketing Icons Section -->
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                Krishh Kidss Zone
            </h1>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>Vision</h4>
                </div>
                <div class="panel-body">
                    <p>
                    "To make your child grow into complete personality and develop the strength to meet the challenges ahed."
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    </p>
                    <div class="text-center">
                    <a href="vision.html" class="btn btn-default">Read More</a>
                </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>About Us</h4>
                </div>

                <div class="panel-body">
                    <p>We have started Krishh Kidss Zone pre school in 11th February 2010 with motto to give best primary education to children with out any burden. We adopt the simple and effective slogan “Where learning is Fun” , where we always focus on the children’s learning with the help of fun.</p>
                    <div class="text-center">
                    <a href="about.html" class="btn btn-default">Read More</a>
                </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>Events</h4>
                </div>
                <div class="panel-body">
                    <p>
                    We celebrate almost each and every festivals and days as a part of our curriculam. That will help the children to know and understand the impotance of the festivals and days. We try to fill the colours in education by celebrating such events.
                    <br/>
                    <br/>
                    </p>                        
                    <div class="text-center">
                    <a href="events.html" class="btn btn-default">See More</a>
                </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Features Section -->



    <!-- /.row -->

    <hr>

    <!-- Call to Action Section -->
    <div class="well">
        <div class="row">
            <div class="col-md-8">
                <h3> Contact Us:</h3>

                <p>Adress:<br/>
                18 Sarita Vihar,<br/>
                Opp. Kartavya Bunglows,<br/>
                Anand Nadiad Road,<br/>
                Lambhvel, 387-310<br/>
                Anand, Gujarat</p><br/>

            </div>
            <div class="col-md-4">
            <p>Contact Details<br/>
            Ph.No. +91 99799 64200             <br/>
            Like Us On Facebook
            <ul class="list-unstyled list-inline list-social-icons">
                <li>
                    <a href="https://www.facebook.com/Krishkidszone?fref=ts"><i class="fa fa-facebook-square fa-2x"></i></a>
                </li>
            </ul></p>
            <p>Copyright &copy; Krishh Kidss Zone 2015</p>
            <p>Developed By: Shree InfoTech Ltd.</p>
            </div>
        </div>
    </div>

    <hr>

    <!-- Footer -->

</div>
<!-- /.container -->

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
    interval: 5000 //changes the speed
})
</script>


</body>

1 个答案:

答案 0 :(得分:0)

您有多个.cstring _format: .asciz "%d\n" .text .globl _main _main: # program setup pushq %rbp movq %rsp, %rbp # program - 16 byte aligned at this point # print stack pointer memory movq %rsp, %rax call bob # prints the same value as the next call to bob xorq %rax, %rax movl %esp, %eax call bob # prints the same value as previous call to bob # this code breaks subl $16, %esp # bug here if I use this (32 bit math) subq $16, %rsp # works fine if I use this (64 bit math) call bob addq $16, %rsp # program cleanup movq %rbp, %rsp popq %rbp ret # assumes 16 byte aligned when called. Prints %rax bob: subq $8, %rsp movq %rax, %rsi lea _format(%rip), %rdi call _printf addq $8, %rsp ret div个标签完全重复或不合适。您在旋转木马中的图片包含多个nav标记style,它们应该是style="max-width:100%" style="height:auto"但不是必需的,如果您确实需要应用规则,则应该进入样式表。

此示例应为您提供更好的起点。

&#13;
&#13;
style="max-width:100%; height:auto;"
&#13;
$('.carousel').carousel({
  interval: 5000 //changes the speed
})
&#13;
body {
  background: url(http://placehold.it/1350x1050/5E58D1/fff/) no-repeat center center fixed;
  background-size: cover;
}
html,
body {
  height: 100%;
}
.navbar.navbar-default {
  font-size: 16px;
  background-color: #3A368C;
  border-width: 0px;
  border-radius: 0px;
}
.navbar.navbar-default .navbar-nav > li > a {
  color: #FAF2F2;
  background-color: #161263;
}
.navbar.navbar-default .navbar-nav > li > a:hover {
  color: #FAF2F2;
  background-color: #3C3880;
}
.navbar.navbar-default .navbar-brand,
.navbar.navbar-default .navbar-brand:hover {
  color: #fff;
}
.navbar.navbar-default .navbar-toggle {
  border-color: #5E58D1;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}
.carousel,
.item,
.active {
  height: 100%;
}
.carousel-inner {
  height: 100%;
}
.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.carousel.fade {
  opacity: 1;
}
.carousel.fade .item {
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  left: 0 !important;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block !important;
  z-index: 1;
}
.carousel.fade .item:first-child {
  top: auto;
  position: relative;
}
.carousel.fade .item.active {
  opacity: 1;
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  z-index: 2;
}
.carousel-control {
  z-index: 2;
}
&#13;
&#13;
&#13;