折叠显示上的导航栏固定按钮答案

【问题标题】：navbar fixed button on collapse show折叠显示上的导航栏固定按钮
【发布时间】：2022-01-26 19:54:22
【问题描述】：

我正在尝试保持暗模式切换器的位置以显示崩溃。我正在使用引导程序，但对自定义 css 很好。我尝试将切换器移到折叠之外和标题上方，但它仍在移动。有没有我忽略的引导类？

Navbar.jsx

<nav className='navbar navbar-expand-lg navbar-light custom-nav'>
        <button className='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation'>
            <span className='navbar-toggler-icon'></span>
        </button>
        <NavLink className='navbar-brand' to={props.url[0]}>{props.title}</NavLink>
        <div className='collapse navbar-collapse' id='navbarNav'>
            <ul className='navbar-nav'>
                <li className='nav-item'>
                    <NavLink className='nav-link nav-link-ltr' activeclassname='active' to={props.url[1]}>{props.link[1]}</NavLink>
                </li>
                <li className='nav-item'>
                    <NavLink className='nav-link nav-link-ltr' activeclassname='active' to={props.url[2]}>{props.link[2]}</NavLink>
                </li>
                <li className='nav-item'>
                    <NavLink className='nav-link nav-link-ltr' activeclassname='active' to={props.url[3]}>{props.link[3]}</NavLink>
                </li>
            </ul>
        </div>
        <div>
            <input type='checkbox' class='checkbox' id='checkbox' onChange={toggleDarkMode} />
            <label for='checkbox' class='checkbox-label'>
                <i class='fas fa-sun'></i>
                <i class='fas fa-moon'></i>
                <span class='ball'></span>
            </label>
        </div>
    </nav>

【问题讨论】：

翻转 2 个<div> 元素的顺序，我怀疑这应该可以解决问题，或者是解决问题的第一步；但我无法用这段 sn-p 代码真正尝试一下。
我试过了，它适用于我原来的问题，但在桌面视图中，切换器移动到标题的左侧。查看问题中的更新图像。
如果您需要有关如何修复它的更准确建议，您应该在此处发布实际测试/运行可重现的示例。目前只有部分 html（从外观上看是它的模板代码），没有 CSS。如果你在这里有一个可运行的 sn-p，人们可以运行它来查看结果，那就容易多了。

标签： html css bootstrap-4

【解决方案1】：

也许如果您对切换器使用“位置：绝对”，当标题展开并且切换器周围的所有元素都移动时，它会保持原位。

【讨论】：