如何使用bootstrap垂直对齐多个图形？

hgc7kmma 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(201)

我已经使用以下代码在bootstrap中垂直对齐多个图像：

<div class="container border rounded overflow">
    <div class="row text-center p-2 flex-nowrap" id="anID">
      
        <img src="../../static/img1.jpg" width=15% alt="">
      
    
        <img src="../../static/mg2.jpg" width=15% alt="">
     
...
    </div>
  </div>

这就是结果：圆形容器中的多张图片相邻：

我想用图形来实现同样的效果。使用相同的代码是行不通的。它只会让它们出现在彼此的顶部，就像这样：

<div class="container border rounded">
    <div class="row text-center pt-2 px-2" id="anotherID">
      
        <figure>
          <img src="../../static/img2.jpg" width=15% alt="">
          <figcaption>a caption</figcaption>
        </figure>
      
        <figure>
          <img src="../../static/img3.jpg" width=15% alt="">
          <figcaption>another caption</figcaption>
        </figure>
      
        ...
    </div>
  </div>

有人能帮我解决这个问题吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/73062995/how-can-you-align-multiple-figures-vertically-with-bootstrap

2条答案

按热度按时间

k3bvogb11#

Bootstrap有类d-flex，它将子元素设置为彼此相邻。换句话说，它使类名为d-flex的元素成为flex容器，并且它是flex-items的直接子元素。

.d-flex{
 display:flex;
}

它一般具有display:flex性质。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<div class="container border rounded">
  <div class="d-flex flex-wrap text-center pt-2 px-2" id="anotherID">
    <figure>
      <img src="https://i.stack.imgur.com/r2NFZ.png" width="30%" class="img-fluid" alt="">
      <figcaption>a caption</figcaption>
    </figure>
    <figure>
      <img src="https://i.stack.imgur.com/r2NFZ.png" width="30%" class="img-fluid" class="img-fluid" alt="">
      <figcaption>another caption</figcaption>
    </figure>
    <figure>
      <img src="https://i.stack.imgur.com/r2NFZ.png" width="30%" class="img-fluid" alt="">
      <figcaption>another caption</figcaption>
    </figure>
    <figure>
      <img src="https://i.stack.imgur.com/r2NFZ.png" width="30%" class="img-fluid" alt="">
      <figcaption>another caption</figcaption>
    </figure>
    <figure>
      <img src="https://i.stack.imgur.com/r2NFZ.png" width="30%" alt="">
      <figcaption>another caption</figcaption>
    </figure>
  </div>
</div>
<h1>Just for your reference I am showing below part how bootstrap works</h1>
<div class="container border rounded">
  <div class="row">
    <div class="col-sm-3">
      <figure>
        <img src="https://i.stack.imgur.com/r2NFZ.png" class="img-fluid" alt="">
        <figcaption>a caption</figcaption>
      </figure>
    </div>
    <div class="col-sm-3">
      <figure>
        <img src="https://i.stack.imgur.com/r2NFZ.png" class="img-fluid" alt="">
        <figcaption>a caption</figcaption>
      </figure>
    </div>
    <div class="col-sm-3">
      <figure>
        <img src="https://i.stack.imgur.com/r2NFZ.png" class="img-fluid" alt="">
        <figcaption>a caption</figcaption>
      </figure>
    </div>
    <div class="col-sm-3">
      <figure>
        <img src="https://i.stack.imgur.com/r2NFZ.png" class="img-fluid" alt="">
        <figcaption>a caption</figcaption>
      </figure>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2022-12-08

62lalag42#

请尝试使用 Bootstrap

<div class="container border rounded overflow">
    <div class="row text-center pt-2 px-2 align-item-center justify-content-start overflow-auto flex-nowrap" id="anotherID">
      
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
        <figure width=15%>
          <img src="https://dummyimage.com/200x200/000000/E4E4E4" alt="">
          <figcaption>a caption</figcaption>
        </figure>
    </div>
  </div>

赞(0）回复(0）举报 2022-12-08

我来回答

如何使用bootstrap垂直对齐多个图形？

2条答案

请尝试使用 Bootstrap

相关问题

热门标签

最新问答