Bootstrap 4 Grid проблема в небольших устройствах

Question

Мой код указан ниже

<div class="row align-items-center">
  <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
    One of three columns
  </div>
  <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
   One of three columns
  </div>
</div>

CSS выглядит как ниже

.row {
    height: calc(70vh - 60px);
}

Когда я регистрирую мобильное или маленькое устройство в сетке, оставьте немного места сверху и снизу. скриншот прилагается ниже

Вы можете видеть пространство. Я хочу сделать div без пробела. Как я могу?

Answer 1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div style="height: 200px;background-color: sandybrown;" class="d-flex align-items-center justify-content-center">
    <div class="row no-gutters d-flex bg-primary">
      <div class="col-12 col-md-6 bg-info">on small 12-cols and medium or above 6-cols</div>
      <div class="col-12 col-md-6 bg-warning">on small 12-cols and medium or above 6-cols</div>
    </div>
</div>

, если вы не хотите использовать отступы, нет полей только на маленьком экране, вы можете использовать media query в scss

@media (max-width: 576px) { 
      margin: 0px; padding: 0px 
}