Bootstrap导航栏切换

问题描述

所以，我第一次搞砸了引导程序，弄清楚了它是如何工作的.我在导航栏上取得了不错的进步，但是我对导航栏切换感到非常困惑.

So, I'm messing with bootstrap for the first time, figuring out how things work. I've made good progress with navbars, but I'm absolutely stumped about the navbar-toggler.

<nav class="nav navbar-expand-sm navbar-dark">
    <a class="navbar-brand" href="" id="homeOverride"> <span class="overrideFonts"> Home </span> </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">

        <li class="nav-item">
          <a class="nav-link" href=""> <span class="overrideFonts"> Projects </span> </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href=""> <span class="overrideFonts"> Contact </span> </a>
        </li>

      </ul>
    </div>
  </nav>

无论我做什么，似乎只要页面到达该sm断点，navbar-toggler都会停留在navbar-brand链接元素上-就像它向左对齐一样.我已经尝试了所有我能想到的东西.基本上，我想发生的是，一旦我的页面碰到了断点并且隐藏了各个列表项，我希望将navbar-toggler对齐到页面的右侧.现在，它看起来像是向左对齐，并且基本上我没有做任何事情来覆盖该行为.

It seems like no matter what I do, whenever the page hits that sm breakpoint, the navbar-toggler sticks to the navbar-brand link element -- It's like it's aligned left, or something. I have tried literally everything I could think of. Basically, what I'm wanting to happen is once my page hits that breakpoint and the various list items are hidden, I want that navbar-toggler to be aligned to the right side of the page. Right now, it looks like it's aligned left, and basically nothing I'm doing is overriding that behavior.

我尝试添加navbar-toggler-right，我尝试提供一个自定义ID来覆盖行为，也许是float:right！important;-

I've tried adding navbar-toggler-right, I tried giving a custom ID to override the behavior with maybe float: right !important; --

导航栏行为

我要做的就是在遇到断点时将按钮移到页面右侧

All I'm trying to do is get that button to the right side of that page when the breakpoint is hit

推荐答案

只需更改此行

<nav class="nav navbar-expand-sm navbar-dark">

要

<nav class="navbar navbar-expand-sm navbar-dark">

这篇关于Bootstrap导航栏切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！