带全屏覆盖的 bootstrap4 导航栏 [英] bootstrap4 navbar with fullscreen overlay

查看：23
本文介绍了带全屏覆盖的 bootstrap4 导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望引导程序 4 导航栏保持完全展开.另外我想要一个覆盖元素，其中图像和文本向右对齐.即可点击的 img/文本所有类别"，向右对齐.

这是我所拥有的.我无法让文本向右移动.

.overlay {高度:100%；宽度:0；位置:固定；z-索引:1；顶部:0；左:0；背景颜色:RGB(0,0,0)；背景颜色:rgba(0,0,0, 0.9);溢出-x:隐藏；过渡:0.5s；}.overlay-content {位置:相对；顶部:25%；宽度:100%；文本对齐:居中；边距顶部:30px；}.overlay 一个 {填充:8px；文字装饰:无；字体大小:36px；颜色:#818181；显示:块；过渡:0.3s；}.overlay a:hover, .overlay a:focus {颜色:#f1f1f1；}.overlay .closebtn {位置:绝对；顶部:20px；右:45px；字体大小:60px；}

<div id="myNav" class="overlay"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a><div class="overlay-content"><a href="#">关于</a><a href="#">服务</a><a href="#">客户</a><a href="#">联系方式</a>

<nav class="navbar navbar-expand navbar-light bg-light"><a class="navbar-brand" href="#"><img src="img/icons/logo/pquizlogo.svg" width="38" height="38" class="d-inline-block align-top" alt="">品牌名称</a><div><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;所有类别<脚本>函数 openNav() {document.getElementById("myNav").style.width = "100%";}函数 closeNav() {document.getElementById("myNav").style.width = "0%";}

</nav>

请告诉我 HTML 是否正常，以及如何使所有类别"显示在导航栏的右侧.

谢谢！

解决方案

你需要将span元素设置为display:block;然后你就可以使用text-align: right;.

我在 span 中添加了一个 nav-icon 类，并将您的内联样式移动到了 css 部分:

.overlay {高度:100%；宽度:0；位置:固定；z-索引:1；顶部:0；左:0；背景颜色:RGB(0,0,0)；背景颜色:rgba(0,0,0, 0.9);溢出-x:隐藏；过渡:0.5s；}.overlay-content {位置:相对；顶部:25%；宽度:100%；文本对齐:居中；边距顶部:30px；}.overlay 一个 {填充:8px；文字装饰:无；字体大小:36px；颜色:#818181；显示:块；过渡:0.3s；}.overlay a:hover, .overlay a:focus {颜色:#f1f1f1；}.overlay .closebtn {位置:绝对；顶部:20px；右:45px；字体大小:60px；}.导航图标{字体大小:30px；游标:指针；显示:块；文本对齐:右；}

<div id="myNav" class="overlay"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a><div class="overlay-content"><a href="#">关于</a><a href="#">服务</a><a href="#">客户</a><a href="#">联系方式</a>

<nav class="navbar navbar-expand navbar-light bg-light"><a class="navbar-brand" href="#"><img src="img/icons/logo/pquizlogo.svg" width="38" height="38" class="d-inline-block align-top" alt="">品牌名称</a><div><span class="nav-icon" onclick="openNav()">所有类别&#9776;</span><脚本>函数 openNav() {document.getElementById("myNav").style.width = "100%";}函数 closeNav() {document.getElementById("myNav").style.width = "0%";}

</nav>

I want the bootstrap 4 navigation bar to stay fully expanded. Also I would like to have an overlay element where the image and text is aligned to the right. i.e the clickable img/text "All categories", is aligned to the right.

Here is what I have. I cannot get the text to go to the right.

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

<body>
  
  <div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>
  
  
  <nav class="navbar navbar-expand navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="img/icons/logo/pquizlogo.svg" width="38" height="38" class="d-inline-block align-top" alt="">Brand-name
    </a>
    <div>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; All categories</span>
      <script>
      function openNav() {
      document.getElementById("myNav").style.width = "100%";
      }
      function closeNav() {
      document.getElementById("myNav").style.width = "0%";
      }
      </script>
    </div>
  </nav>
</body>

Please tell me if the HTML is alright, and how to make 'All categories' show up to the right of the navbar.

thanks!

解决方案

You need to set the span element to display:block; and then you can use text-align: right;.

I added a class nav-icon to the span and moved your inline style to the css section:

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

.nav-icon{
     font-size:30px;
     cursor:pointer;
     display: block;
     text-align: right;
}

<body>
  
  <div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>
  
  
  <nav class="navbar navbar-expand navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="img/icons/logo/pquizlogo.svg" width="38" height="38" class="d-inline-block align-top" alt="">Brand-name
    </a>
    <div>
    <span class="nav-icon" onclick="openNav()">All categories &#9776;</span>
      <script>
      function openNav() {
      document.getElementById("myNav").style.width = "100%";
      }
      function closeNav() {
      document.getElementById("myNav").style.width = "0%";
      }
      </script>
    </div>
  </nav>
</body>

这篇关于带全屏覆盖的 bootstrap4 导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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