Question

我正在尝试创建一个很好的固定bootstrap 4警报。

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

继承我的CSS：

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

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

如何解决？

Answer 1

如果您检查该元素，则可以看到其上有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>

Answer 2

添加自己的名为.alert-dismissible .close类的类并添加 padding-bottom:0到它

.alert-dismissible .close{
    padding-bottom: 0;
}

并在#alert id中添加padding-bottom:0

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

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

2 个答案: