PHP 和 Bootstrap 中带有缩略图导航的动态引导轮播

Question

我想制作一个底部带有图像缩略图的动态引导轮播。 我浏览了几个似乎在他们的演示中有效的代码片段和答案，并对这些代码进行了试验。 我刚刚使此链接中的代码正常工作，但缩略图太小了。 这是我为制作动态轮播而编写的函数...

//make image thumbnails
function make_image_previews ($con){
    $output = ''; 
    $count = 0;
    $result = make_query($con); //returns the images in database
    while($row = mysqli_fetch_array($result)){
        if($count == 0){
            $output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'" class="active"> 
            <img class="d-block w-100 img-fluid" src="'.$row['image'].'">
            </li>';
        }else{
            $output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'"> 
            <img class="d-block w-100 img-fluid" src="'.$row['image'].'">
            </li>';
        }
        $count = $count + 1;
    }
    return $output;
}

这是页面源中的 html output

<div class="row">
    <div class="col-md-12">     
    <div id="dynamic_slide_show" class="carousel slide light-shadow carousel-fade carousel-thumbnails" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
              <img src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg" class="d-block w-100" />
          </div>
          <div class="carousel-item">
                <img src="upload/protected_photo-1515879218367-8466d910aaa4.jpg" class="d-block w-100" />
           </div>
           <div class="carousel-item">
                <img src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg" class="d-block w-100" />
           </div>    
       </div>
    <a class="carousel-control-prev" href="#dynamic_slide_show" 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="#dynamic_slide_show" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--Carousel image preview-->
    <ol class="carousel-indicators">
        <li data-target="#dynamic_slide_show" data-slide-to="0" class="active"> 
            <img class="d-block w-100 img-fluid" src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg">
        </li>
        <li data-target="#dynamic_slide_show" data-slide-to="1"> 
           <img class="d-block w-100 img-fluid" src="upload/protected_photo-1515879218367-8466d910aaa4.jpg">
        </li>
        <li data-target="#dynamic_slide_show" data-slide-to="2"> 
          <img class="d-block w-100 img-fluid" src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg">
        </li>    
    </ol>
  </div>                
  </div>
  </div>
<hr>

有一个问题与相同的问题，但代码与我在顶部链接中提供的不同。 我尝试更改代码的答案，但我只能看到三个下划线。 如何解决代码中小缩略图的问题？

编辑当我尝试 CSS

.carousel-indicators {
  position: static;
}
.carousel-indicators>li {
    width: 100px
}

缩略图溢出到下一行。 如下图所示，水平线（ <hr>标签）位于轮播所在行的末尾

Answer 1

这是一个示例 jsfiddle： https://jsfiddle.net/setw7kn0/

您可以通过将.carousel-indicators > li更改为您想要的任何内容来设置图像width （在示例中我使用了100px ）。 还有position: static; 在.carousel-indicators是使缩略图停止与carousel重叠。

告诉我这是否是你要找的。

编辑：

那么.carousel-indicators与hr重叠的原因是因为hr不应该直接放在.row内，而应该放在row内的column内或.row结束标记之后。

此外，我已将.carousel-indicators > li height更改为auto以便您覆盖默认bootstrap css， bootstrap程序的默认值为height: 3px; （所以你实际上是在与引导程序作斗争）。