导航栏顶部的 Bootstrap 警报

Question

我在导航栏顶部的布局文件中添加了以下代码，但警报和导航栏之间有一些间距。我尝试添加一些 CSS, margin bottom: 0 但该边距随后应用于整个站点上的所有警报。

<div class="alert alert-danger" role="alert">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<strong>Moving Servers</strong> You will experience some downtime as we move all of our files onto a new server. This move should be finished on 12/16.
	</div>
   
  
  <!-- Navbar Starts -->
  <header>
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">

我们只希望警报位于导航栏的正上方。

Answer 1

如果您只是想将其放置在 之上navbar，请创建一个类来添加到其中，然后使用margin-bottom: 0，这样它就不会更改默认警报。

\n\n

请参阅工作片段。

\n\n

\r\n

\r\n

.alert.alert-server {\r\n  margin-bottom: 0;\r\n  border-radius: 0;\r\n}

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>\r\n<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>\r\n<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />\r\n<div class="alert alert-danger alert-server" role="alert">\r\n  <button type="button" class="close" data-dismiss="alert">\xc3\x97</button>\r\n  <strong>Moving Servers</strong> You will experience some downtime as we move all of our files onto a new server. This move should be finished on 12/16.\r\n</div>\r\n<nav class="navbar navbar-default navbar-static-top">\r\n  <div class="container-fluid">\r\n    <!-- Brand and toggle get grouped for better mobile display -->\r\n    <div class="navbar-header">\r\n      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>\r\n        <span class="icon-bar"></span>\r\n        <span class="icon-bar"></span>\r\n        <span class="icon-bar"></span>\r\n\r\n      </button> <a class="navbar-brand" href="#">BRAND</a>\r\n\r\n    </div>\r\n    <!-- Collect the nav links, forms, and other content for toggling -->\r\n    <div class="collapse navbar-collapse" id="bs-nav">\r\n      <ul class="nav navbar-nav">\r\n        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a>\r\n\r\n        </li>\r\n        <li><a href="#">About</a>\r\n\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <!-- /.navbar-collapse -->\r\n  </div>\r\n  <!-- /.container-fluid -->\r\n</nav>

\r\n

\r\n

\r\n

\n