Bootstrap Carousel HTML结构和有趣的输出

时间:2018-01-11 作者:Marcos Di Paolo

我建立了一个wordpress网站,顶部有一个引导转盘。正如您可能看到的,旋转木马的代码是:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" 
role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
  </a>
</div>
我所做的(因为我需要它是动态的)是:

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="6"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="7"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="8"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="9"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$postsSlider = new WP_Query(array(
    \'cat\' => 7,
    \'posts_per_page\' => 10,
));
$first = true;
if ($postsSlider->have_posts()) :
while ($postsSlider->have_posts()) : $postsSlider->the_post(); 

    if ($first) {
 ?>
    <a class="foto_link" href="<?php the_permalink(); ?>">
      <div class="carousel-item active" style="background-image: url(\'<?php the_post_thumbnail_url(\'slider\');?>\'); background-size: cover">

        <div class="carousel-caption d-none d-md-block">
          <a href="<?php the_permalink(); ?>">
            <h1 class="titulo-slider">
              <?php the_title(); ?>
            </h1>
            <br>
            <h4 class="subtitulo-slider">
              <?php echo the_excerpt(); ?>
            </h4>
            <br>
            <h3>Por
              <?php the_author(); ?>
            </h3>
          </a>
        </div>
      </div>
    </a>

    <?php 
  $first = false;
  } 
  else { ?>
    <a class="foto_link" href="<?php the_permalink(); ?>">
      <div class="carousel-item" style="background-image: url(\'<?php the_post_thumbnail_url(\'slider\');?>\'); background-size: cover">

        <div class="carousel-caption d-none d-md-block">
          <a href="<?php the_permalink(); ?>">
            <h1 class="titulo-slider">
              <?php the_title(); ?>
            </h1>
            <br>
            <h4 class="subtitulo-slider">
              <?php echo the_excerpt(); ?>
            </h4>
            <br>
            <h3>Por
              <?php the_author(); ?>
            </h3>
          </a>
        </div>
      </div>
    </a>
    <?php }
  ?>

    <?php

    endwhile; else :
            echo \'<p class="no-content">No encontramos ningún contenido</p>\';
    endif;
    wp_reset_postdata();
  ?>

 </div>

 <!-- Controls -->
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true">/span>
   <span class="sr-only">Anterior</span>
   </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Próximo</span>
   </a>
  </div>
为了便于描述,我告诉你$first 变量和if语句,我使用它为第一次迭代提供“active”类。其余的代码是相同的
一般来说,一切正常,但我的问题是,在我的代码中,标记:

<a class="foto_link" href="<?php the_permalink(); ?>">
正在包装标记:

<div class="carousel-item active" style="background-image: url(\'<?php the_post_thumbnail_url(\'slider\');?>\'); background-size: cover">
但不幸的是,结果是:

enter image description here

那个结束语</a> 第4行(小图中)应该在div.carousel-item的末尾,我不知道为什么不是。imgs中的我的代码:enter image description hereenter image description hereenter image description here一二

1 个回复
最合适的回答,由SO网友:Jamie 整理而成

您有一个嵌套的锚定标记。我以前从未见过这样做。这是用你的代码写的

 <a href="#"><a href="#"></a></div></div></a>   
我想这是你的问题。为什么需要第一个锚定标签?

 ?php
while ($postsSlider->have_posts()) : $postsSlider->the_post(); 

if ($first) {
?>
  <a class="foto_link" href="<?php the_permalink(); ?>">//should this be here
拿出锚标签看看会发生什么

结束