css Bootstrap “row row-md”或“row row-cols”似乎不能处理图像？

kadbb459 于 2023-05-23 发布在 Bootstrap

关注(0)|答案(1)|浏览(182)

图像没有像它们应该的那样破碎，一点也没有。如果我用类似<h1></h1>的东西替换图像行，那么它就可以工作。为什么不是图像？我也试过div class="col col-lg-2 col-md-3"，但没有用。我百分百确定是简单的东西而且我的脑子太光滑了。。

<div class="container">

        <button type="button" data-toggle="collapse" data-target="#gallery button">Simple collapsible</button>
        
        <div id="gallery button" class="collapse">

            <section class="gallery min-vh-100">

                <div class="row row-md-3">
                    <div class="col">
                        <img src="images/art_img000.jpg" class="gallery-item">
                    </div>  
                
                    <div class="col">
                        <img src="images/art_img000.jpg" class="gallery-item">
                    </div>  
                
                    <div class="col">
                        <img src="images/art_img000.jpg" class="gallery-item">
                    </div>  
                
                    <div class="col">
                        <img src="images/art_img000.jpg" class="gallery-item">
                    </div>                  
                </div> 
                
            </section>

        </div>
    </div>

css

来源：https://stackoverflow.com/questions/76309617/bootstrap-row-row-md-or-row-row-cols-dont-seem-to-work-with-images

1条答案

按热度按时间

v8wbuo2f1#

你犯了几个错误：

使用data-toggle和data-target（Bootstrap 4）代替data-bs-toggle和data-bs-target（Bootstrap 5）。我想你想使用Bootstrap 5。
不遵循文档中所示的Bootstrap HTML。如果不遵循Bootstrap HTML，组件将无法工作。
尝试使用类row-md-3作为Bootstrap类。这不是Bootstrap类！参见documentation。
未正确使用col-md-3。

请参见下面的片段。
如果窗口宽度大于768px，则图像将并排显示。如果窗口宽度等于或小于768px，则图像将被堆叠。参见文档。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<div class="container">
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#gallery-button" aria-expanded="false" aria-controls="gallery-button">
    Button with data-bs-target
  </button>
  <div id="gallery-button" class="collapse">
    <section class="gallery min-vh-100">
      <div class="row">
        <div class="col-md-3">
          <img src="images/art_img000.jpg" class="gallery-item">
        </div>

        <div class="col-md-3">
          <img src="images/art_img000.jpg" class="gallery-item">
        </div>

        <div class="col-md-3">
          <img src="images/art_img000.jpg" class="gallery-item">
        </div>

        <div class="col-md-3">
          <img src="images/art_img000.jpg" class="gallery-item">
        </div>
      </div>
    </section>
  </div>
</div>

赞(0）回复(0）举报 2023-05-23

我来回答

css Bootstrap “row row-md”或“row row-cols”似乎不能处理图像？

1条答案

相关问题

热门标签

最新问答