html - 如何在 Bootstrap 的大屏幕右侧制作可折叠的导航栏？

Question

我在 Bootstrap 中制作了带有屏幕右侧链接的导航栏。现在我想通过向其添加菜单按钮来使导航栏响应。我曾尝试使用 breakpoint -md 创建一个 toggler 类，但这样做我的链接会出现在大屏幕的左侧。此外，该按钮不可见。为什么，我做错了什么？

我的代码:

<nav class="navbar navbar-expand-md sticky-top fixed-top bg-white navbar-toggelable-md">
        <div class="container">
        <strong><a class="navbar-brand" href="#">Bhawna</a></strong>

        <button class="navbar-toggler navbar-toggler-right" type="button" 
        data-toggle="collapse" data-target="#navbarContent">
        <span class="navbar-toggler-icon"></span>
        </button>

  <div class="collapse navbar-collapse navbar-right" id="navbarContent">


                <ul class=" navbar-nav navbar-right">
            <li class="nav-item active"><a class="nav-link active"  
               href="index.html">Work</a> </li>
            <li></li>
            <li class="nav-item"><a class="nav-link" href="about.html">About 
             Me</a> </li>
   </div>
             <li> <label class="switch">
             <input type="checkbox" checked data-toggle="toggle"  
             onclick="location.href='darkindex.html'">
             <span class="slider round"></span>

              </label>
              </li>
                </ul>

            </div>

            </nav>

Answer 1

您在 <ul class=" navbar-nav navbar-right">... </ul> 之外有以下 block

<li> <label class="switch">
  <input type="checkbox" checked data-toggle="toggle" onclick="location.href='darkindex.html'">
  <span class="slider round"></span>

  </label>
</li>

休息，你可以按照自己的方式设计它......我已经为切换按钮应用了边框以显示它的位置

下面的工作片段

.navbar-toggler-icon {
  border: 1px solid red;
  color: blue;
}

span {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md sticky-top fixed-top bg-light ">
  <div class="container">
    <strong><a class="navbar-brand" href="#">Bhawna</a></strong>

    <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarContent">
                <span class="navbar-toggler-icon"></span>
            </button>

    <div class="collapse navbar-collapse navbar-right" id="navbarContent">
      <ul class=" navbar-nav navbar-right">
        <li class="nav-item active"><a class="nav-link active" href="index.html">Work</a> </li>
        <li></li>
        <li class="nav-item"><a class="nav-link" href="about.html">About
                            Me</a> </li>
        <li> <label class="switch">
                                    <input type="checkbox" checked data-toggle="toggle" onclick="location.href='darkindex.html'">
                                    <span class="slider round"></span>
                                </label>
        </li>
      </ul>
    </div>
  </div>

</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.
  </p>
</div>