gpt4 book ai didi

css - 不在容器中时,Bootstrap 4 警报具有不需要的底部填充

转载 作者:行者123 更新时间:2023-12-04 16:07:39 26 4
gpt4 key购买 nike

我正在尝试创建一个不错的固定 Bootstrap 4 警报。

我的问题是警报没有放在容器内时有不需要的底部填充。由于这是固定的并且是自动居中的,我不希望它在容器内。

这是我的CSS:

  #alert {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

JSfiddle 示例: https://jsfiddle.net/81vhy56o/

怎么修?

最佳答案

如果您检查元素,您可以看到有一个 margin不是padding .要修复它,只需添加类 mb-0<div class="alert"></div>这将使 margin-bottom: 0 !important;如果您不想要任何填充,则可以添加 pb-0对它也是如此。

#alert {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
  <head>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div id="alert" class="alert alert-warning alert-dismissible mb-0 pb-0">
<button type="button" class="close" data-dismiss="alert">&times;</button>
Hi! I'm a test alert!
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

关于css - 不在容器中时,Bootstrap 4 警报具有不需要的底部填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45890179/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com