Как убрать расстояние между блоками - PullRequest
Новая
       7

Как убрать расстояние между блоками

0 голосов
/ 26 февраля 2019

У меня есть эти блоки. введите описание изображения здесь

Как сделать левый блок выше правого и удалить расстояние между ними?Это css: 

.cnt {
  padding:20px;
  margin-top:20px;
  margin-bottom:10px;
  background: rgba(255, 255, 255, .5);
  overflow:hidden;
  box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}

@media only screen and (min-width : 480px) {
  .cnt {
    height: auto;
  }
}

@media only screen and (min-width : 768px) {
  .cnt {
    height: 452px;
    padding: 30px;
  }
}    
@media all and (max-width: 1170px) {
    .cnt {
        height: 380px;
    }
}

Это html: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-md-6  col-xs-12">
  <div class="cnt"></div>
</div>                                   
<div class="col-md-6  col-xs-12">
  <div class="cnt"></div>
</div>

Эти блоки реагируют друг на друга и находятся в мобильной версии.Проблема в том, что я не могу убрать расстояние между ними.Как я могу решить это?

Ответы [ 4 ]

0 голосов
/ 26 февраля 2019

Измените этот CSS, затем удалите расстояние между блоками: 

.cnt {
    padding:auto;
    margin-top:auto;
    margin-bottom:auto;
    background: rgba(255, 255, 255, .5);
    overflow:hidden;
    box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}
0 голосов
/ 26 февраля 2019

Просто удалите margin-top:20px;margin-bottom:10px; из класса .cnt!Это главная проблема

0 голосов
/ 26 февраля 2019

Вы должны использовать классы начальной загрузки для удаления отступов и полей между блоками:

https://getbootstrap.com/docs/4.3/utilities/spacing/

Я добавил в ваш код классы pr-md-0 и pl-md-0 mr-md-0 и ml-md-0 что означает:

pr-md-0 (заполнение справа для среднего устройства равно 0)

pl-md-0 (заполнение слева для среднего устройства равно 0)

mr-md-0 (поле справа для среднего устройства равно 0)

ml-md-0 (поле слева для среднего устройства равно 0)

Это изменения для левого и правого промежутка между ними, но если вы хотите избавиться отпробел сверху и снизу вы можете добавить разные классы для примера: mt-0 mb-0 pt-0 pb-0

что означает:

mt-0 - верхнее поле до 0

pt-0 - верхнее отступ до 0

mb-0 - нижнее поле до 0

pb-0 - заполнение дна до 0

Для разной высоты для каждого блока вы должны дать разныеnt классы вместо того, чтобы использовать тот же класс cnt , например, добавить cnt1 и cnt2 , как в примере ниже: 

<!DOCTYPE html>

<html>
    <head>

    <style>
    .cnt {
  padding:20px;
  margin-top:20px;
  margin-bottom:10px;
  background: rgba(255, 255, 255, .5);
  overflow:hidden;
  box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}

@media only screen and (min-width : 480px) {
  .cnt {
    height: auto;
  }
}

@media only screen and (min-width : 768px) {
  .cnt {
    padding: 30px;
  }
  .cnt1 {
    height: 552px;
  }

  .cnt2 {
    height: 452px;
  }
}
@media all and (max-width: 1170px) {
  .cnt1 {
    height: 480px;
  }

  .cnt2 {
    height: 380px;
  }
 }
    </style>
    </head>
    <body>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <div class="container">
        <div class="row">
            <div class="col-md-6  col-xs-12 mr-md-0 pr-md-0 ">
          <div class="cnt cnt1 mb-0 mt-md-4">

          </div>
        </div>                                                                 

        <div class="col-md-6  col-xs-12 ml-md-0 pl-md-0 ">
          <div class="cnt cnt2 mt-0 mt-md-4">

          </div>
        </div>  
        </div>
    </div>  
</body>
</html>

Для полянабивка

0 голосов
/ 26 февраля 2019

Вы можете переопределить стандартную Bootstrap css следующим образом: классы col-md-6 и col-xs-12 по умолчанию будут иметь отступы и поле, которое определяет расстояние, о котором вы говорите.А также удалите поля из класса .cnt: - 

.col-md-6, .col-xs-12{
   padding: 0 !important;
   margin: 0 !important;
}
...