如何使用bootstrap 4水平集装箱卡？

Question

我的目标是集中我的容器包含所有卡片。 我使用了boostrap 4并尝试了justify-content-center之类的所有内容，但是最后一行存在问题。 请全屏查看我的代码段。

如何将水平容器居中？ （比如保证金：0自动？）

图片：右边的间距太大了。

Example

＆＃13;

＆＃13;

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

.container {
  max-width: 100%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我们需要justify-content首先指定center属性，这会将我们所有的卡片放在中心，然后分配flex-start的属性。

这不能分配给1个盒子。

所以我添加了另一个框，即<div class="flex-left">

  

类outerContainer（黑色边框）被指定为justify-content:center

的属性

它会将flex-left框放在这个中心

  

类flex-left具有flex-wrap:wrap;的属性，它会将溢出的卡推送到下一行，该行将位于左侧，因此不需要justify-content:flex-start

但现在的问题是，如果卡片开始移动到下一行，则不会在中心对齐。

这是我们不想要：

这就是我们想要的 ：

我已添加media-queries。 并为其分配margin-left的属性。

margin-left Calculation

margin-left:(50% - (([card_margin * 2] + [card_width]) / 2))

首先，我们将float-left推出50％，然后将float-left的剩余宽度的一半带回来。

＆＃13;

＆＃13;

.card {
  width: 100px;
  margin: 10px;
}

.container {
  width: 100%;
}

.outerContainer {
  margin-top: 40px;
  justify-content: center;
}

.flex-left {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 991px) {
  .flex-left {
    margin-left: calc(50% - 310px);
  }
}

@media screen and (max-width: 766px) {
  .flex-left {
    margin-left: calc(50% - 250px);
  }
}

@media screen and (max-width: 484px) {
  .flex-left {
    margin-left: calc(50% - 185px)
  }
}

@media screen and (max-width: 363px) {
  .flex-left {
    margin-left: calc(50% - 125px)
  }
}

＆＃13;

<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 outerContainer">
    <div class="flex-left">
      <div class="card">
        <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">
        <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">
        <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">
        <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">
        <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">
        <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>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用.row和col-*而不是使用d-flex（仅用于包含justify-content-center）。 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

Answer 3

一个简单的响应式解决方案是使用网格系统。

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

.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 mb-2">
    <div class="col-4">
      <div class="card card-custom ">
        <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>
    <div class="col-4">
      <div class="card card-custom ">
        <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 class="col-4">
      <div class="card card-custom ">
        <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>
  </div>
  <div class="row">
    <div class="col-4">
      <div class="card card-custom ">
        <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 class="col-4">
      <div class="card card-custom ">
        <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>
    <div class="col-4">
      <div class="card card-custom ">
        <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>
</div>