如何用引导4对水平集装箱卡进行居中？

Question

我的目标是把所有卡片放在我的容器中央。我使用了引导4，并尝试了所有类似justify-content-center的东西，但是最后一行有问题。请在全屏上看到我的代码片段。

如何对水平容器进行居中？(比如保证金:0辆汽车?)

图片:问题是右边的间距太大了。

​

示例

​

.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

我们需要我们的justify-content首先分配center属性，这将把我们所有的卡放在中间，然后再分配flex-start的属性。

这是不可能分配给仅仅一个框。

因此，我添加了另一个框，即<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:(50% - (([card_margin * 2] + [card_width]) / 2))

我们先把float-left推到50%，然后再把float-left的剩余宽度的一半拿回来。

​

.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)
  }
}

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

​

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>

​