将 Bootstrap 导航栏测量值移动到等于其高度答案

【问题标题】：Move Bootstrap navbar measurement equal to its height将 Bootstrap 导航栏测量值移动到等于其高度
【发布时间】：2015-07-16 15:24:25
【问题描述】：

我正在使用引导程序开发的网站有一个标题图像，后跟一个引导程序导航栏。我们喜欢在图像上有一个透明的导航栏，但是当导航栏开始在手机等上堆叠时看起来很奇怪。

JSFiddle

我想做的是以下

将导航栏向上移动自己的高度，使导航栏与标题图像的底部边缘和标题图像的顶部对齐。
使导航栏在图像顶部具有 50% 的黑色背景和白色文本。
当导航栏换行超过一行时，我希望它移回图像下方，并且背景颜色恢复为#808184 的纯色。

CSS

.navbar-engage {
    background-color: rgba(0,0,0,0.5);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
 -ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    border-color: #e7e7e7;
    color: #FFFFFF;
}

HTML

<body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12" style="background-color:#FABC41; height: 50px;">BAR</div>
      </div>
      <div class="row">
        <div class="col-sm-12" style="padding:0;"><img class="img-responsive" src="http://travelandwildlifephotography.com/wp-content/uploads/2014/07/Camping-on-Fraser-Island1.jpg" alt="CLI Engage"> </div>
      </div>
    </div>
    <nav class="navbar navbar-engage">
      <div class="container-fluid">
        <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div>
        <div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Page 1-2</a></li>
                <li><a href="#">Page 1-3</a></li>
              </ul>
            </li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
          </ul>
        </div>
      </div>
    </nav>

【问题讨论】：

when it wraps 不是微不足道的。如果您正在寻找动态解决方案，则需要检查元素顶部位置。真的不清楚你在问什么，或者你在使用媒体查询方面做了什么尝试——或者你是否熟悉媒体查询

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

1) 似乎导航栏只要只有一行高，就会保持 50 像素的恒定高度。如果是这种情况，那么解决第一个问题就像添加一样简单

position:relative;
top:-50px;

到.navbar-engage。如果不是这种情况（导航栏可以改变高度，即使它只有一行高 - 例如如果字体大小发生变化），则需要一些 javascript 才能完成工作。

2) 要在导航栏全为一行时更改文本颜色，我们需要一个媒体查询。当导航栏为单行时，以下内容将使文本变为白色：

@media (min-width: 768px) {
    .navbar-engage a  {
        color:white;
    }
    .navbar-engage li a:hover {
        color:black;
    }
}

添加了第二个选择器.navbar-engage li a:hover，以在悬停时使文本变为黑色。这不是您原始请求的一部分，但它极大地增加了内容的可读性。接受还是放弃 - 由您决定。

3) 我们需要做的就是添加另一个媒体查询来撤消我们的定位更改并修改导航栏的背景颜色：

@media (max-width: 767px) {
    .navbar-engage {
        top:0px;
        background:#808184;
    }
}

最终的 CSS 将如下所示：

.navbar-engage {
    background-color: rgba(0, 0, 0, 0.5);
    filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    -ms-filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    border-color: #e7e7e7;
    color: #FFFFFF;
    position: relative;
    top: -50px;
}
@media (min-width: 768px) {
    .navbar-engage a {
        color: white;
    }
    .navbar-engage li a:hover {
        color: black;
    }
}
@media (max-width: 767px) {
    .navbar-engage {
        top: 0px;
        background: #808184;
    }
}

但是请记住，为了仅使用 CSS 来完成此操作，必须将一些数字硬编码，这意味着对标记的更改可能会导致需要稍微调整 CSS 以使事情正常工作.

我也有可用的工作小提琴here。

【讨论】：

即使我添加了颜色，为什么堆叠版本中的文本是蓝色的：#FFFFFF;代码。
我知道我必须添加 .navbar-engage a { color:white; }
color: white; 仅在大屏幕的媒体查询中定义。在一个小屏幕上，它被删除，文本恢复为默认链接颜色。（链接的颜色往往令人讨厌......）