删除Bootstrap中的填充/边距

问题描述

我正在使用Bootstrap 4建立一个网站，并且我注意到每个div都有填充，我正在寻找一种方法来删除它。我试图用padding添加一个名为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>

解决方法

您需要删除内联样式。要提供边距或填充，您可以使用引导类，如我在以下示例中所做的那样。有关更多信息，visit bootstrap spacing。

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

,

您必须将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>