英文:
How to move elements to the ends and make the hamburger button work? [ HTML & Bootstrap ]
问题
以下是您的内容的翻译:
我正在为一个网站制作导航栏,我想将标题和链接移动到导航栏的两端。而且,当我缩短网站的宽度时,汉堡按钮会出现,但不显示链接,并且不对齐。我正在使用HTML和Bootstrap。
这是在桌面上的外观:
桌面页面截图
以及在移动设备和平板电脑上的外观:
在此输入图像描述
非常感谢任何帮助!
这是我的当前代码。注意:我已经在head
标签中链接了Bootstrap CSS文件,以及在/body
标签之前的script
标签中链接了Bootstrap的JavaScript文件。
<div class="container">
<nav class="navbar navbar-expand-lg">
<div class="container">
<header class="d-flex flex-wrap justify-content-center align-items-center py-3">
<h2>
<a href="/" class="text-decoration-none link-dark">CAFÉ - 82</a>
</h2>
</header>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav pb-2">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
英文:
I am making a navbar for a website and I want to move the header and the link to the ends of the navbar. Also, when I shorten the site's width, the hamburger button appears but does not display the links and is not alignes properly. I am using HTML and Bootstrap
This is how it looks on desktop :
Screenshort of the page on desktop
and this is how it looks on mobile and tablets :
enter image description here
Any help is greatly appreciate it!
This is my current code. NOTE: I have linked the Bootstrap CSS files in the head
tag and the script
tag just before the /body
tag.
<div class="container">
<nav class="navbar navbar-expand-lg">
<div class="container">
<header
class="d-flex flex-wrap justify-content-center align-items-center py-3">
<h2>
<a href="/" class="text-decoration-none link-dark">CAFÉ - 82</a>
</h2>
</header>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="#navbarSupportedContent">
<ul class="navbar-nav pb-2">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
答案1
得分: 0
对不起,以下是您要翻译的内容:
"alignment is not reproducible with the given sample. However, the hamburger isn't showing the menu when clicked because you have a hashtag / pound / # in the id
value."
<div class="collapse navbar-collapse" id="#navbarSupportedContent">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<div class="container">
<nav class="navbar navbar-expand-lg">
<div class="container">
<header class="d-flex flex-wrap justify-content-center align-items-center py-3">
<h2>
<a href="/" class="text-decoration-none link-dark">CAFÉ - 82</a>
</h2>
</header>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav pb-2">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
英文:
The alignment is not reproducible with the given sample. However, the hamburger isn't showing the menu when clicked because you have a hashtag / pound / # in the id
value.
<div class="collapse navbar-collapse" id="#navbarSupportedContent">
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<div class="container">
<nav class="navbar navbar-expand-lg">
<div class="container">
<header
class="d-flex flex-wrap justify-content-center align-items-center py-3">
<h2>
<a href="/" class="text-decoration-none link-dark">CAFÉ - 82</a>
</h2>
</header>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav pb-2">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论