如何保持W3.CSS容器保证金与Bootsrap警报保证金一致？

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%;
}

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

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

Updated fiddle