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

據我所知，當.row .row-container上的填充頂部正在工作時， .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>