Question

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

我的代码：

<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>

之外有以下代码段

<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>

如何在Bootstrap中使用右侧链接制作可折叠的导航栏？

1 个答案: