Bootstrap 4-行与其他行之间的填充（768px宽度）

Question

我一直在尝试减少行之间的填充，因为出现了一个无法删除的间隙。

另一个差距在h1和span之间

我尝试通过@media（最大宽度：768px）使用css删除这些，但未成功。

这是我的代码。

.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

<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一起使用时，我了解到与octavia有关的div正在添加这些间隙-因此我删除了这些间隙并进行了一些小改动以使其看起来不错。请检查

Answer 2

据我所知，.octicon在.row .row-container上的填充顶部正在工作时为行之间提供了额外的空间。

从.octicon删除左填充可以成功减少行之间的额外间隙。

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

Answer 3

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