Question

在我的移动视图中，我有一个水平滚动条，可容纳三个div（如卡片）。水平滚动条可以完美地工作，但是最后一个div的右边距没有显示。它应该显示6px。这三个div都有margin-left: 6px和margin-right: 6px;

这是正确显示的左边距：

这是完全不显示的右边距：

@media only screen and (max-width: 480px) {
  /* Html */
  html {
    overflow: scroll;
    overflow-x: hidden;
  }
  /* Cards */
  .mobile-card-container>.row {
    overflow-x: auto;
  }
  .mobile-card-container {
    display: block;
  }
  
  .card-background {
    height: 100px;
    background-color: #ffffff;
    border-radius: 6px;
    margin-top: 16px;
    -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
    -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
    box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<html>

<body>


  <!-- Simulaciones Default -->
  <div class="row">
    <!-- Mobile Card Container -->
    <div class="col-12 mobile-card-container container-fluid" style="border: 1px solid;">
      <div class="row flex-nowrap flex-sm-wrap" style="border: 1px solid red;">
        <!-- Card 1  -->
        <div class="col-10 card-background simulacion mx-auto">
          Card 1
        </div>

        <!-- Card 2 -->
        <div class="col-10 card-background simulacion mx-auto">
          Card 2
        </div>

        <!-- Card 3 -->
        <div class="col-10 card-background simulacion mx-auto">
          Card 3
        </div>

      </div>

    </div>
    <!-- /Mobile Card Container -->



</body>

</html>

Answer 1

此帖子解决了我的问题。我基本上在最后一个格中添加了content。

Last margin / padding collapsing in flexbox / grid layout

右边距不显示水平滚动

1 个答案: