Javascript 在PHP和bootstrap中具有缩略图导航的动态引导旋转木马

我想做一个底部有图像缩略图的动态引导旋转木马。我浏览了几个代码片段和答案，它们似乎在他们的演示中起作用，并对这些代码进行了实验。我刚开始工作，但缩略图太小了。下面是我编写的用于制作动态旋转木马的函数

//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;
}

缩略图溢出到下一行。如下图所示，水平线（

标记）位于旋转木马所在行的末尾

---

以下是一个JSFIDLE示例：

您可以通过将

.carousel indicators>li

更改为所需的任何值（在示例中，我使用了

100px

）来设置图像的宽度。还有

位置：静态中的code>。转盘指示器

用于使缩略图停止与

转盘

重叠

告诉我这是不是你要找的

编辑：

.carousel指示器

与

hr

重叠的原因是

hr

不应直接放在

行

内，而应放在

列

行内或

行

结束标记后

---

我还将

.carousel indicators>li

height

更改为

auto

，以便覆盖默认值

bootstrap

css，

bootstrap

的默认值为

height:3px（因此您实际上是在与引导进行斗争）。
下面是一个JSFIDLE示例：

您可以通过将
.carousel indicators>li
更改为所需的任何值（在示例中，我使用了
100px
）来设置图像的宽度。还有
位置：静态中的code>。转盘指示器
用于使缩略图停止与
转盘
重叠

告诉我这是不是你要找的

编辑：

.carousel指示器
与
hr
重叠的原因是
hr
不应直接放在
行
内，而应放在
列
行

内或

行

结束标记后

---

我还将

.carousel indicators>li

height

更改为

auto

，以便覆盖默认值

bootstrap

css，

bootstrap

的默认值为

height:3px

（所以你实际上是在与bootstrap作斗争）。

你能用php将你的html更改为任何你想要的格式吗？这样我们就可以看到真正的问题并尽力帮助你了？@Francisco你是说页面源代码中的html内容吗？是的，这样我们就可以看到你的问题了。好的。我已经更新了。你能用php将你的html更改为你想要的任何内容吗？这样我们就可以看到真正的问题并尽力帮助你了？@Francisco你是说页面源代码中的html内容吗？是的，这样我们就可以看到你的问题了。好的。我有updated@Fransico您提供的代码片段似乎工作正常。但我的机器似乎有问题。缩略图是静态的，但有点溢出到下一行。如果你想要更多的细节，你能告诉我如何在评论部分发布一张图片吗？我已经更新了答案updated@Fransico您提供的代码片段似乎工作正常。但我的机器似乎有问题。缩略图是静态的，但有点溢出到下一行。如果你想要更多的细节，你能告诉我如何在评论部分发布图片吗？我已经更新了答案。JSFIDLE也已经更新了

<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>

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