Question

我得到的问题是我的内容没有出现在旋转木马上。我已经为滑块添加了背景并为我的内容添加了z-index，但幻灯片的内容没有出现。请帮助伙伴们！

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->



 <title>Carousel Template for Bootstrap</title>

 <!-- Bootstrap core CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

 <!-- Custom styles for this template -->
 <link href="carousel.css" rel="stylesheet">
</head>

<body>


<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 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>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/1-3-slide.png" alt="First slide">
      <div class="container">
          <div class="row">
            <div class="col-md-6">
                <div class='slide-image-left'>
                    <img src='img/Design.png'>
                </div>  
            </div>
              <div class="col-md-6">
                <div class="carousel-caption">
                    <h1>Design</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                  </div>
              </div>
          </div>
      </div>
    </div>

    <div class="item">
      <img src="img/2-slide.png" alt="Second slide">
      <div class="container">
          <div class="row">
            <div class="col-lg-6">
                <div class="carousel-caption">
                    <h1>Communication</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                </div> 
            </div>
            <div class="col-lg-6">                    
                <div class='slide-image-right'>
                    <img src='img/Communication.png'>
                </div> 
            </div>
          </div>
      </div>
    </div>

    <div class="item">
      <img src="img/1-3-slide.png" alt="Third slide">
      <div class="container">
          <div class="row">
            <div class="col-lg-6">
               <div class='slide-image-left'>
                    <img src='img/Consulting.png'>
                </div> 
            </div>
            <div class="col-lg-6">                    
                <div class="carousel-caption">
                    <h1>Consulting</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                </div> 
            </div>
          </div>
      </div>
    </div>


</div><!-- /.carousel -->





  <!-- FOOTER -->
  <footer>
    <p class="pull-right"><a href="#">Back to top</a></p>
    <p>&copy; 2015 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
  </footer>

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


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

      </body>
    </html>

CSS代码

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #5a5a5a;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;

}
/* Since positioning the image, we need to help out the caption */


/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;

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

.carousel-inner .item .carousel-caption h1{
    z-index: 10;
}

.slide-image-left img{
    margin-top: 80px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {


  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
    .featurette-heading {
    margin-top: 120px;
  }
}

我还附上了一张图片，我正在尝试将内容放在黄色区域。请帮助人们:) enter image description here

Answer 1

请在您的css样式表中添加此样式，其工作内容将以黄色背景显示。

.carousel-caption {
    background-color: yellow;
    float: left;
    position: relative;
}

并确保您包含js因为我看不到您的HTML代码中的脚本标记

如果未包含

中的bootstrap.js，请添加此项

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

定制轮播|引导

1 个答案: