导航栏

Question

我在导航栏顶部的布局文件中添加了以下代码，但警报和导航栏之间有一些间距。我尝试添加一些CSS，保证金底部：0，但该边距适用于整个网站上的所有警报。

＆＃13;

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

请参阅工作代码段。

＆＃13;

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="alert alert-danger alert-server" 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>
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">BRAND</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">About</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你从来没有真正提供任何CSS示例，所以我不完全确定你是如何尝试实现这一点的，但我确实看到你正在使用navbar-static-top类来修复它的位置而你说你想要导航栏顶部的警报，所以我会继续使用它。

您需要为警报指定一个唯一的ID或类，以便将其放置在导航栏的顶部，而不会影响页面上的其他警报。例如，我应用了以下样式来修复位置并为其提供z-index，因此导航栏不会出现在警报的顶部：

#top-alert {
  position: fixed;
  top: 0;
  z-index: 99999;
}

然后我将#top-alert ID分配给警报，如下所示：

<div id="top-alert" 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>

总而言之，这会导致警报出现在导航栏的顶部。

这是一个小提琴链接：https://jsfiddle.net/of91yuhu/