我正在使用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>
答案 0 :(得分: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;
}
答案 1 :(得分: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>