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

问题信息

在这里，我有一个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

最佳答案

由于您要定位的是卡的父级.w3-container，因此应使用padding而不是margin：

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

由于w3卡的4%左/右padding，我为左/右1%设置了margin。

我还将w3卡的width更改为31.33%，以确保准确性并删除不希望的空间。

Updated fiddle

关于css - 如何使W3.CSS容器边距与Bootstrap警报边距保持一致？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47731443/