我正在尝试创建一个不错的固定 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">×</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/