导航栏固定按钮上的崩溃显示

Question

我正在努力保持暗模式切换开关的位置显示崩溃。我正在使用引导程序，但可以使用自定义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>

Answer 1

如果您使用"位置：绝对；对于toggle，当标头展开并且toggle周围的所有元素都被移动时，它将保持原位。