将Bootstrap导航栏测量值移动到其高度 [英] Move Bootstrap navbar measurement equal to its height

查看：107
本文介绍了将Bootstrap导航栏测量值移动到其高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



JSFiddle



我想做的是以下


  1. 将导航条向上移动自己的高度，使导航条与标题图像的底部边缘对齐，并在标题图像的顶部


  2. 在图片上方使导航栏背景为50％的黑色和白色文字。


  3. 当导航栏换行到多行时，我想将其移回到图像和背景颜色之下，以返回到的纯色＃808184 。


CSS 

 code> .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-12style =background-color：＃FABC41; height：50px;> BAR< / div> 
< / div> 
 
< div class =col-sm-12style =padding：0;>< img class =img-responsivesrc =http://travelandwildlifephotography.com/wp-content /uploads/2014/07/Camping-on-Fraser-Island1.jpgalt =CLI Engage> < / div> 
< / div> 
< / div> 
< nav class =navbar navbar-engage> 
< div class =container-fluid> 
< div class =navbar-header> < a class =navbar-brandhref =＃> WebSiteName< / a> < / div> 
< div> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>首页< / a>< / li& 
< li class =dropdown> < a class =dropdown-toggledata-toggle =dropdownhref =＃> Page 1< span class =caret>< / span>< 
< ul class =dropdown-menu> 
< li>< a href =＃>关于我们< / a>< / li> 
< li>< a href =＃>第1-2页< / a>< / li> 
< li>< a href =＃>第1-3页< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃> Page 2< / a>< / li> 
< li>< a href =＃>< span class =glyphicon glyphicon-searcharia-hidden =true>< / span>< / a> / li> 
< / ul> 
< / div> 
< / div> 
< / nav>


解决方案

1）看来navbar会，因为它只有一行高，是50px的恒定高度。如果是这样，那么第一个修复就像添加

一样简单：

  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）所有我们需要做的是添加另一个媒体查询，这将撤消我们的位置更改和修改背景颜色nav bar：

  @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需要稍微调整，以使事情工作。



我也有工作小提示这里。


The website I am developing using bootstrap has a header image followed by a bootstrap navbar. We like having a transparent navbar on the image but it looks weird when the navbar starts to stack on phones etc.

JSFiddle

What I would like to do is the following

  1. Move the navbar up by its own height so that the navbar is aligned with the bottom edge of the header image and on top of the header image.

  2. Make the navbar have a background of 50% black with white text when on top of the image.

  3. When the navbar wraps to more than one line I would like it to move back below the image and the background color to return to a solid color of #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>

解决方案

1) It seems that the navbar will, as long as it is only one line tall, be a constant height of 50px. If this is the case, then the fix to number one is as simple as adding

position:relative;
top:-50px;

to .navbar-engage. If this is not the case (the navbar can change height even if it is only one line tall - such as if the font size changes) then a bit of javascript will be needed get the job done.

2) To change the text color when the nav bar is all one line, we need a media query. The following will make the text white when the nav bar is a single line:

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

The second selector, .navbar-engage li a:hover, was added to make the text black on hover. This was not a part of your original request, but it greatly added to the readability of the content. Take it or leave it - up to you.

3) All we need to do is add another media query that will undo our positioning change and modify the background color of the nav bar:

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

The final CSS will look like this:

.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;
    }
}

Please bear in mind, however, that in order to do this with CSS alone, some numbers had to be hard-coded in, meaning that changes to your markup could result in the css needing to be tweaked slightly to make things work.

I also have the working fiddle available here.

这篇关于将Bootstrap导航栏测量值移动到其高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆