Правое поле не отображается с горизонтальной прокруткой - PullRequest
Новая
       20

Правое поле не отображается с горизонтальной прокруткой

0 голосов
/ 20 ноября 2018

В моем мобильном представлении у меня есть горизонтальная прокрутка, которая содержит три элемента (например, карты).Горизонтальная прокрутка работает отлично, однако правое поле последнего элемента div не отображается.Это должно показать 6px.Все три деления имеют margin-left: 6px и margin-right: 6px;

Вот правильное поле слева:

enter image description here

Здесь поле справа непоказывает на всех:

enter image description here

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

1 Ответ

0 голосов
/ 21 ноября 2018

Этот пост решил мою проблему.Я просто добавил content к моему последнему div.

Последнее свертывание полей / отступов в макете flexbox / grid

...