如何使 W3.CSS 容器边距与 Bootstrap 警报边距保持一致？

Question

问题信息

这里我有一个 Bootstrap（版本 4.0.0 beta 2）警报，每一边都有 5% 的边距。我还在一个 w3 容器中嵌套了三张 W3.CSS 卡片，每张卡片的大小为容器大小的 31%，每张卡片的每一侧都有 1% 的边距。

想要的结果：

我希望卡片的容器每边有 5% 的边距，每张卡片之间有 1% 的边距。到目前为止，左右两张卡片的边距与顶部的警报不相同。

当前结果：

预期结果：

HTML:

<div class="alert alert-success" role="alert" style="overflow: hidden;">
  This is the bootsrap alert I want the column's container to have the same 5% margin on both sides as.
</div>
<div class="w3-container">
  <div class="w3-panel w3-card w3-yellow">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis dapibus aliquam. Nam ornare mollis sodales. In mollis in elit ac eleifend. Integer ac volutpat nisl, id cursus lorem. Aenean pellentesque volutpat tortor in porttitor. Cras ultrices
      augue sit amet scelerisque hendrerit. Cras vel neque et justo posuere tempus volutpat pharetra lectus. Nam luctus condimentum bibendum.</p>
  </div>
  <div class="w3-panel w3-card-2 w3-yellow">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis dapibus aliquam. Nam ornare mollis sodales. In mollis in elit ac eleifend. Integer ac volutpat nisl, id cursus lorem. Aenean pellentesque volutpat tortor in porttitor. Cras ultrices
      augue sit amet scelerisque hendrerit. Cras vel neque et justo posuere tempus volutpat pharetra lectus. Nam luctus condimentum bibendum.</p>
  </div>
  <div class="w3-panel w3-card-4 w3-yellow">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis dapibus aliquam. Nam ornare mollis sodales. In mollis in elit ac eleifend. Integer ac volutpat nisl, id cursus lorem. Aenean pellentesque volutpat tortor in porttitor. Cras ultrices
      augue sit amet scelerisque hendrerit. Cras vel neque et justo posuere tempus volutpat pharetra lectus. Nam luctus condimentum bibendum.</p>
  </div>
</div>

CSS:

 .alert {
    margin-top: 10px;
    margin-right: 5%;
    margin-left: 5%;
    color: #fff;
    border: none;
    background-color: #2ecc71;
  }

  .w3-container {
    margin: 0 5%;
  }

  .w3-card,
  .w3-card-2,
  .w3-card-4 {
    float: left;
    width: 31%;
    margin: 0 1%;
    padding: 20px;
  }

我还提供了一个JSFiddle Demo

Answer 1

由于您的目标 .w3-container 是 w3-cards 的父级，因此您应该使用 padding 而不是 margin:

.w3-container {
  padding: 0 4%;
}

我为 left/right padding 设置了 4% 因为 1% left/right margin ]w3-卡片.

我还将 w3-cards 的 width 更改为 31.33% 以确保准确性并删除不需要的 space。

Updated fiddle

如何使 W3.CSS 容器边距与 Bootstrap 警报边距保持一致？

How can I keep a W3.CSS container margin consistent with a Bootsrap alert margin?

css

multiple-columns

bootstrap-4

w3.css