Bootstrap 4 - отступ между строками и другими (ширина 768 пикселей)

Question

Я пытался уменьшить отступы между строками, потому что появился пробел, который я не могу удалить.

Другие промежутки между h1 и span

Я пытался использовать css от @media (max-width: 768px), чтобы удалить их, но безуспешно.

Вот мой код.

.row.row-container {
  padding-top: 30px;
}

.octicon.octicon-check {
  font-size: 38px;
  padding-left: 22px;
}

.box h3 {
  font-size: 16px;
}

.box span {
  font-size: 13px;
}

@media (max-width: 768px) {
  .row.row-container {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
  }
  .octicon.octicon-check {
    font-size: 38px;
    padding-top: 22px;
  }
}

<div class="container">
  <div class="row row-container mt-4 ">
    <div class="col-md-1 col-sm-2 pt-2   sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0  box">
      <h3>Piaskowanie</h3>
      <span>Szybki i bezbolesny zabieg polegający na usunięciu osadu kamienia nazębnego
                    za pomocą strumienia wody pod ciśnieniem.
                </span>
    </div>

    <div class="col-md-1 col-sm-2 pt-2    sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0 box">
      <h3>Endodencja</h3>
      <span>Bezbolesne leczenie chorej tkanki zęba, z użyciem nowoczesnego mikroskopu i endometru.</span>
    </div>
    <div class="col-md-1 col-sm-2 pt-2   sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0 box">
      <h3>Wypełnianie zębów</h3>
      <span>Wypełnienie ubytku materiałem plastycznym, lub wypełnienie ubytku pracami protetycznym.</span>
    </div>
  </div>
  <div class="row row-container mt-4 ">
    <div class="col-md-1 col-sm-2 pt-2   sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0 box">
      <h3>Piaskowanie</h3>
      <span>Szybki i bezbolesny zabieg polegający na usunięciu osadu kamienia nazębnego
                    za pomocą strumienia wody pod ciśnieniem.</span>
    </div>

    <div class="col-md-1 col-sm-2 pt-2   sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0 box">
      <h3>Endodencja</h3>
      <span>Bezbolesne leczenie chorej tkanki zęba, z użyciem nowoczesnego mikroskopu i endometru.</span>
    </div>
    <div class="col-md-1 col-sm-2 pt-2   sercive-icon">
      <i class="octicon octicon-check"></i>
    </div>
    <div class="col-md-3 col-sm-10 p-0 box">
      <h3>Wypełnianie zębów</h3>
      <span>Wypełnienie ubytku materiałem plastycznym, lub wypełnienie ubytku pracami protetycznym.</span>
    </div>
  </div>
</div>

Answer 1

.row.row-container {}

.octicon.octicon-check {
  font-size: 38px;
  padding-left: 22px;
}

.box h3 {
  font-size: 16px;
}

.box span {
  font-size: 13px;
}

@media (max-width: 768px) {
  .row.row-container {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
  }
  .octicon.octicon-check {
    font-size: 38px;
    padding-top: 22px;
  }
}

#test {
  margin: auto;
  margin-top: 5px;
}

<div class="container">
  <div class="row row-container mt-4 ">

    <div class="col-md-3 col-sm-10 p-0  box">
      <h3 id="test">Piaskowanie</h3>
      <span>Szybki i bezbolesny zabieg polegający na usunięciu osadu kamienia nazębnego
                    za pomocą strumienia wody pod ciśnieniem.
                </span>
    </div>

    <div class="col-md-3 col-sm-10 p-0 box">
      <h3 id="test">Endodencja</h3>
      <span>Bezbolesne leczenie chorej tkanki zęba, z użyciem nowoczesnego mikroskopu i endometru.</span>
    </div>

    <div class="col-md-3 col-sm-10 p-0 box">
      <h3 id="test">Wypełnianie zębów</h3>
      <span>Wypełnienie ubytku materiałem plastycznym, lub wypełnienie ubytku pracami protetycznym.</span>
    </div>
  </div>
  <div class="row row-container mt-4 ">

    <div class="col-md-3 col-sm-10 p-0 box">
      <h3 id="test">Piaskowanie</h3>
      <span>Szybki i bezbolesny zabieg polegający na usunięciu osadu kamienia nazębnego
                    za pomocą strumienia wody pod ciśnieniem.</span>
    </div>


    <div class="col-md-3 col-sm-10 p-0 box">
      <h3 id="test">Endodencja</h3>
      <span>Bezbolesne leczenie chorej tkanki zęba, z użyciem nowoczesnego mikroskopu i endometru.</span>
    </div>

    <div class="col-md-3 col-sm-10 p-0 box">
      <h3 id="test">Wypełnianie zębów</h3>
      <span>Wypełnienie ubytku materiałem plastycznym, lub wypełnienie ubytku pracami protetycznym.</span>
    </div>
  </div>
</div>

Answer 2

<div class="container">
        <div class="row row-container mt-4 ">

            <div class="col-md-3 col-sm-10 p-0  box">
                <h3 id= "test">Piaskowanie</h3>
                <span>Szybki i bezbolesny zabieg polegający na usunięciu osadu kamienia nazębnego
                    za pomocą strumienia wody pod ciśnieniem.
                </span>
            </div>

            <div class="col-md-3 col-sm-10 p-0 box" >
                <h3 id= "test">Endodencja</h3>
                <span>Bezbolesne leczenie chorej tkanki zęba, z użyciem nowoczesnego mikroskopu i endometru.</span>
            </div>

            <div class="col-md-3 col-sm-10 p-0 box">
                <h3 id= "test">Wypełnianie zębów</h3>
                <span>Wypełnienie ubytku materiałem plastycznym, lub wypełnienie ubytku pracami protetycznym.</span>
            </div>
        </div>
        <div class="row row-container mt-4 ">

            <div class="col-md-3 col-sm-10 p-0 box">
                <h3 id= "test">Piaskowanie</h3>
                <span>Szybki i bezbolesny zabieg polegający na usunięciu osadu kamienia nazębnego
                    za pomocą strumienia wody pod ciśnieniem.</span>
            </div>


            <div class="col-md-3 col-sm-10 p-0 box">
                <h3 id= "test">Endodencja</h3>
                <span>Bezbolesne leczenie chorej tkanki zęba, z użyciem nowoczesnego mikroskopu i endometru.</span>
            </div>

            <div class="col-md-3 col-sm-10 p-0 box">
                <h3 id= "test">Wypełnianie zębów</h3>
                <span>Wypełnienie ubytku materiałem plastycznym, lub wypełnienie ubytku pracami protetycznym.</span>
            </div>
        </div>
    </div>

используйте это с вышеупомянутым css, я понял, что div'ы, связанные с octavia, добавляли эти пробелы - поэтому я удалил их и внес небольшие изменения, чтобы он выглядел хорошо. пожалуйста, проверьте

Answer 3

Насколько я могу судить, .octicon дает вам дополнительное пространство между рядами, когда работает ваш отступ на .row .row-container.

Удаление отступа слева от .octicon позволяет уменьшить дополнительный разрыв между рядами.

.octicon.octicon-check{
  font-size: 38px;
  /*padding-left: 22px;*/
 }