Bootstrap 4.1.0网格模态框轮播故障：仅首个B-1网格生效求助

嘿，我来帮你搞定这个问题！从你描述的情况来看，ID重复是最可能的元凶——Bootstrap的模态框、轮播这类组件都是靠唯一ID来关联触发元素和目标组件的，要是多个网格项共用了同一个ID，浏览器只会认第一个匹配的元素，剩下的自然就“罢工”了。

我给你梳理下具体的排查和修正步骤：

1. 确保所有组件ID唯一 #

每个网格对应的模态框、轮播容器、甚至轮播指示器的ID都不能重复，比如：

• 第一个网格（B-1）的模态框用modal-B1，轮播容器用carousel-B1
• 第二个网格的模态框用modal-B2，轮播容器用carousel-B2
• 以此类推，给每个组件加上专属的标识后缀

2. 绑定正确的触发关联 #

每个网格里的图片触发元素，data-target必须指向自己对应的模态框ID；模态框里的轮播指示器，data-target也要指向当前网格对应的轮播容器ID，data-slide-to对应正确的轮播项索引。

修正后的代码示例 #

我给你写个简化的正确示例，对比第一个和第二个网格的写法：

<div class="container">
  <div class="row mb-2 text-center">
    <!-- 第一个网格（B-1）：正常工作的版本 -->
    <div class="col-sm-6 col-lg-3 mb-2">
      <img class="img-fluid" data-toggle="modal" data-target="#modal-B1" src="your-image-1.jpg" alt="B-1">
      <!-- 对应B-1的模态框 -->
      <div class="modal fade" id="modal-B1" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <!-- B-1的轮播 -->
            <div id="carousel-B1" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carousel-B1" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-B1" data-slide-to="1"></li>
              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="slide1-B1.jpg" alt="Slide 1">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="slide2-B1.jpg" alt="Slide 2">
                </div>
              </div>
              <a class="carousel-control-prev" href="#carousel-B1" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              </a>
              <a class="carousel-control-next" href="#carousel-B1" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二个网格（B-2）：修正后的版本 -->
    <div class="col-sm-6 col-lg-3 mb-2">
      <img class="img-fluid" data-toggle="modal" data-target="#modal-B2" src="your-image-2.jpg" alt="B-2">
      <!-- 对应B-2的模态框 -->
      <div class="modal fade" id="modal-B2" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <!-- B-2的轮播 -->
            <div id="carousel-B2" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carousel-B2" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-B2" data-slide-to="1"></li>
              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="slide1-B2.jpg" alt="Slide 1">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="slide2-B2.jpg" alt="Slide 2">
                </div>
              </div>
              <a class="carousel-control-prev" href="#carousel-B2" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              </a>
              <a class="carousel-control-next" href="#carousel-B2" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

额外提示 #

如果你的网格是动态生成的（比如从后端循环输出），可以用循环索引来拼接唯一ID，比如modal-B{{index}}、carousel-B{{index}}，这样就能自动避免重复问题啦。

你可以对照自己的代码检查下ID和关联属性，应该就能解决剩下网格不生效的问题了！

内容的提问来源于stack exchange，提问作者mlegg