在 Bootstrap 中刪除填充/邊距

Question

我正在使用 Bootstrap 4 構建一個網站，我注意到每個 div 都有填充，我正在尋找一種方法來刪除它。 我試圖用填充添加一個名為 nopadding 的類： 0 !important; 邊距：0 ！重要； 但它沒有幫助。 我很想得到一些幫助。

代碼示例（即使鼠標位於鏈接本身下方，我也可以單擊鏈接）：

 .credits { display: flex; justify-content: center; padding: 2px; } .credits a { color: #d5d5d5; text-decoration: none; } .credits a:hover { color: #0088a9; transition: 0.5s; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row text-center"> <div class="col-12"> <div class="credits"> <p style="margin-right: 5px;">Inspired by</p> <a href="https://colorlib.com/preview/theme/alias/" target="_blank">Bootstrap Website Template</a> </div> <div class="credits"> <p style="margin-right: 5px;">Icons from</p> <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <p style="margin-right: 5px; margin-left: 5px;">and</p> <a href="https://iconify.design/" target="_blank">Iconify</a> </div> </div> </div> </div>

Answer 1

您需要刪除內聯樣式。 要提供邊距或填充，您可以使用引導程序類，就像我在下面的示例中所做的那樣。 有關更多信息，請訪問引導間距。

 .credits { display: flex; justify-content: center; padding: 2px; } .credits a { color: #d5d5d5; text-decoration: none; } .credits a:hover { color: #0088a9; transition: 0.5s; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row text-center"> <div class="col-12"> <div class="credits"> <p class="mr-1">Inspired by</p> <a href="https://colorlib.com/preview/theme/alias/" target="_blank">Bootstrap Website Template</a> </div> <div class="credits"> <p class="mr-1">Icons from</p> <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <p class="mr-1 ml-1">and</p> <a href="https://iconify.design/" target="_blank">Iconify</a> </div> </div> </div> </div>

或者，如果您需要刪除所有邊距、填充，您可以像這樣：

target_element * {
    margin: 0;
    padding: 0;
}

Answer 2

你必須把你的a元素放在你的p元素中，因為它們是一致的

 .credits { display: flex; justify-content: center; padding: 2px; } .credits a { color: #d5d5d5; text-decoration: none; } .credits a:hover { color: #0088a9; transition: 0.5s; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row text-center"> <div class="col-12"> <div class="credits"> <p style="margin-right: 5px;">Inspierd by <a href="https://colorlib.com/preview/theme/alias/" target="_blank">Bootstrap Website Template</a> </p> </div> <div class="credits"> <p style="margin-right: 5px;">Icons from <a href="https://fontawesome.com/" target="_blank">font awsome</a> and <a href="https://iconify.design/" target="_blank">iconify</a> </p> </div> </div> </div> </div>