如何将元素移到两端并使汉堡按钮起作用?[HTML和Bootstrap]

huangapple go评论97阅读模式
英文:

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.

&lt;div class=&quot;container&quot;&gt;
      &lt;nav class=&quot;navbar navbar-expand-lg&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;header
            class=&quot;d-flex flex-wrap justify-content-center align-items-center py-3&quot;&gt;
            &lt;h2&gt;
              &lt;a href=&quot;/&quot; class=&quot;text-decoration-none link-dark&quot;&gt;CAF&#201; - 82&lt;/a&gt;
            &lt;/h2&gt;
          &lt;/header&gt;
          &lt;button
            class=&quot;navbar-toggler&quot;
            type=&quot;button&quot;
            data-bs-toggle=&quot;collapse&quot;
            data-bs-target=&quot;#navbarSupportedContent&quot;
            aria-controls=&quot;navbarSupportedContent&quot;
            aria-expanded=&quot;false&quot;
            aria-label=&quot;Toggle navigation&quot;&gt;
            &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;#navbarSupportedContent&quot;&gt;
            &lt;ul class=&quot;navbar-nav pb-2&quot;&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Menu&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;

答案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.

&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;#navbarSupportedContent&quot;&gt;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;nav class=&quot;navbar navbar-expand-lg&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;header
class=&quot;d-flex flex-wrap justify-content-center align-items-center py-3&quot;&gt;
&lt;h2&gt;
&lt;a href=&quot;/&quot; class=&quot;text-decoration-none link-dark&quot;&gt;CAF&#201; - 82&lt;/a&gt;
&lt;/h2&gt;
&lt;/header&gt;
&lt;button
class=&quot;navbar-toggler&quot;
type=&quot;button&quot;
data-bs-toggle=&quot;collapse&quot;
data-bs-target=&quot;#navbarSupportedContent&quot;
aria-controls=&quot;navbarSupportedContent&quot;
aria-expanded=&quot;false&quot;
aria-label=&quot;Toggle navigation&quot;&gt;
&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
&lt;ul class=&quot;navbar-nav pb-2&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Menu&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;About&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月14日 08:07:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/76683955.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定