twitter-bootstrap - 如何使用 bootstrap 4 水平居中容器卡？

Question

我的目标是让我的容器居中包含所有卡片。我使用 boostrap 4 并尝试了所有的东西，比如 justify-content-center 但最后一行有问题。请全屏查看我的代码段。

如何水平居中容器？ (比如 margin: 0 auto ？)

图片:右边间距过大的问题。

Example

.card-custom {
  max-width: 128px;
}

.container {
  max-width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row mt-5">
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.netflix.com/fr/">
        <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
      </a>
    </div>
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.hulu.com">
        <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
      </a>
    </div>
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.netflix.com/fr/">
        <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
      </a>
    </div>
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.hulu.com">
        <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
      </a>
    </div>
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.netflix.com/fr/">
        <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
      </a>
    </div>
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.hulu.com">
        <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
      </a>
    </div>
  </div>
</div>

Answer 1

使用 d-flex 和 justify 而不是使用 .row(仅包含 col-*) -内容中心。 container 已经居中。另外，为什么不使用 container-fluid 而不是 container 因为 container-fluid 是 100% 宽度。

https://www.codeply.com/go/7vCdEHWQ8M

<div class="container">
  <div class="d-flex mt-5 justify-content-center">
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.netflix.com/fr/">
        <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
      </a>
    </div>
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.hulu.com">
        <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
      </a>
    </div>
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.netflix.com/fr/">
        <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
      </a>
    </div>
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.hulu.com">
        <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
      </a>
    </div>
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.netflix.com/fr/">
        <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
      </a>
    </div>
    <div class="card card-custom mx-2 mb-3">
      <a href="https://www.hulu.com">
        <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
      </a>
    </div>
  </div>
</div>

https://www.codeply.com/go/7vCdEHWQ8M