代码之家 › 专栏 › 技术社区 › Andres SK

Bootstrap 5中奇数列的水平居中[重复]

bootstrap-5 css

Andres SK · 技术社区 · 3 年前

我有一些Bootstrap 5专栏,其中有一些文本。此特定页面有奇数列(7),需要在桌面视图上显示,如下所示:

4列(最上面一行)
3列(最下面一行)

问题是底部的一行应该居中,但由于前一行已经有4列,这对于默认的Bootstrap 5助手来说似乎是不可能完成的任务。

这是 my current code (jsfiddle链接):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
  </div>
</div>

以下是显示内容和实际需要内容的视觉比较:

关于如何实现这一点,有什么想法吗?谢谢

1 回复 | 直到 3 年前

isherwood 3 年前

Bootstrap 5排是flexbox容器。只需使用适当的 flex alignment classes 在行上以使列居中。 justify-content-center 做得很好。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <div class="row g-4 justify-content-center">
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
      <div class="item">
        <div class="title">Item title</div>
        <p>Text of item with some description on it.</p>
      </div>
    </div>
  </div>
</div>