Html 带全屏覆盖的bootstrap4导航栏

我希望Bootstrap4导航栏保持完全扩展。此外，我想有一个覆盖元素的图像和文字是对齐的权利。i、 e可点击的img/文本“所有类别”向右对齐

这是我的。我无法使文本向右移动

.overlay{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}

☰ 所有类别
函数openNav（）{
document.getElementById（“myNav”）.style.width=“100%”；
}
函数closeNav（）{
document.getElementById（“myNav”）.style.width=“0%”；
}

您需要将span元素设置为

显示：块

然后可以使用

文本对齐：右

我在span中添加了一个class
nav图标
，并将您的内联样式移动到css部分：


.overlay{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
.导航图标{
字体大小：30px；
光标：指针；
显示：块；
文本对齐：右对齐；
}

所有类别☰；
函数openNav（）{
document.getElementById（“myNav”）.style.width=“100%”；
}
函数closeNav（）{
document.getElementById（“myNav”）.style.width=“0%”；
}
您需要将span元素设置为
显示：块
然后可以使用
文本对齐：右

我在span中添加了一个class
nav图标
，并将您的内联样式移动到css部分：


.overlay{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
.导航图标{
字体大小：30px；
光标：指针；
显示：块；
文本对齐：右对齐；
}

所有类别☰；
函数openNav（）{
document.getElementById（“myNav”）.style.width=“100%”；
}
函数closeNav（）{
document.getElementById（“myNav”）.style.width=“0%”；
}
.overlay a{text align:right；}？尝试过，但无效。我在大多数类中添加了{text align:right；}和{float:right；}，但没有结果。请检查答案。这就是你想要的吗？那答案不起作用。下面是我们所做的：将“mr auto”类添加到左侧的图像链接中。覆盖一个{text align:right；}？试过了，没用。我在大多数类中添加了{text align:right；}和{float:right；}，但没有结果。请检查答案。这就是你想要的吗？那答案不起作用。下面是我们所做的：将“mr auto”类添加到左侧的图像链接中。