在 Bootstrap 中删除填充/边距

Question

我正在使用 Bootstrap 4 构建一个网站，我注意到每个 div 都有填充，我正在寻找一种删除它的方法。我尝试添加一个名为 nopadding 的类，其中包含 padding: 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

您需要删除内联样式。要提供边距或填充，您可以使用引导类，就像我在下面的示例中所做的那样。欲了解更多信息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;
}

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>