html - Boostrap 轮播滑块无法正常工作

Question

好像我在这里做错了什么，我不知道为什么。我希望标题和 CTA 按钮与图像重叠，但它在两者之间分开。任何人都可以帮我在图像上放置标题，所以它可以像我打算做的那样工作吗？

这是HTML

<div>
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item"> <img class="first-slide" src="../assets/img/features/cleardent-header.png" alt="First slide"> 
      <!--slogan and CTA-->
      <div class="container">
        <div class="row header-slogan fadeInDown animated">
          <div class="col-xs-12">
            <section class="cd-intro">
              <h1 class="cd-headline letters type"><span>Do everything.</span> <span class="cd-words-wrapper ahwaiting"><b class="is-visible">Better.</b><b class="colour-cleardent">with ClearDent</b></span></h1>
            </section>
          </div>
        </div>
        <div class="row header-tagline fadeInDown animated">
          <div class="col-xs-12">
            <p>A complete dental practice management program that you are going to <span class="colour-cleardent-sec">love</span></p>
          </div>
        </div>
        <div class="row header-cta fadeInUp animated">
          <div class="col-xs-12">
            <button class="btn-u extra-demo-btns" onClick="window.location='../demo';"><i class="fa fa-paper-plane fa-fw"></i> Book a Demo</button>
            &nbsp; <a href="https://player.vimeo.com/video/157093017" class="btn-u fancybox-media fbmloading" id="cleardent-page-header-2-vimeo" data-fancybox-title="Why ClearDent?"><i class="fa fa-play fa-fw"></i> Watch a Video</a> </div>
        </div>
      </div>
      <!--slogan and CTA end--> 
    </div>
    <div class="item active"> <img class="second-slide" src="../assets/img/features/cleardent-header.png" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item"> <img class="third-slide" src="../assets/img/features/cleardent-header.png" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

标签： htmltwitter-bootstrap

Answer 1

对于 Bootstrap 4，轮播标记应如下所示：

<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="" alt=""> 
        <div class="carousel-caption">

            <!-- YOUR CONTENT HERE -->

        </div>
    </div>
</div>

而且您需要一些 css 才能正确定位您的图像/标题：

.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 720px; // set your height
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  height: 720px; // set your height
  z-index: 9;
}

所以你的代码是：

.carousel-caption {
  z-index: 10;
}

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

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  height: 720px;
  z-index: 9;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
	<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" class=""></li>
	</ol>
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img class="d-block w-100" src="http://placehold.it/1280x720">
			<div class="carousel-caption">

				<!--slogan and CTA-->
				<div class="container">
					<div class="row header-slogan fadeInDown animated">
						<div class="col-xs-12">
							<section class="cd-intro">
								<h1 class="cd-headline letters type"><span>Do everything.</span> <span class="cd-words-wrapper ahwaiting">
									<b class="is-visible">Better.</b><b class="colour-cleardent">with ClearDent</b></span>
								</h1>
							</section>
						</div>
					</div>
					<div class="row header-tagline fadeInDown animated">
						<div class="col-xs-12">
							<p>A complete dental practice management program that you are going to <span class="colour-cleardent-sec">love</span></p>
						</div>
					</div>
					<div class="row header-cta fadeInUp animated">
						<div class="col-xs-12">
							<button class="btn-u extra-demo-btns" onClick="window.location='../demo';"><i class="fa fa-paper-plane fa-fw"></i> Book a Demo</button>
							&nbsp; <a href="https://player.vimeo.com/video/157093017" class="btn-u fancybox-media fbmloading" id="cleardent-page-header-2-vimeo" data-fancybox-title="Why ClearDent?"><i class="fa fa-play fa-fw"></i> Watch a Video</a>
						</div>
					</div>
				</div>
				<!--slogan and CTA end--> 
				
			</div>
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="http://placehold.it/1280x720">
			<div class="carousel-caption">

				<h1>Another example headline.</h1>
				<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
				<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>

			</div>
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="http://placehold.it/1280x720">
			<div class="carousel-caption">

				<h1>One more for good measure.</h1>
				<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
				<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>

			</div>
		</div>
	</div>
	<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>