kjd*_*n84 3 css twitter-bootstrap
我正在尝试创建一个很好的固定引导程序 4 警报。
我的问题是，当警报未放置在容器内时，它具有不需要的底部填充。由于这是固定的并且是自动居中的，我不希望它在容器内。
这是我的 CSS：
#alert {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
JSfiddle 示例：https ://jsfiddle.net/81vhy56o/
怎么修？
如果您检查该元素，您会发现其上有一个marginnot 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>添加你自己的类命名为.alert-dismissible .closeclass并添加
padding-bottom:0到其中
.alert-dismissible .close{
padding-bottom: 0;
}
并在#alertid 添加padding-bottom:0
#alert {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
padding-bottom: 0;
}
| 归档时间： |
|
| 查看次数： |
3719 次 |
| 最近记录： |