Javascript 如何防止React Bootstrap burger menu在展开时推送图标，从而影响其他徽标和图标的位置？

以下是菜单折叠时我的导航栏的外观：

当我展开它时，它会将徽标推到右侧，将两个图标推到底部，如图所示：

当汉堡菜单被扩展时，有没有什么方法可以使标志和图标保持在一个固定的位置？我目前没有任何自定义CSS应用于此组件。任何帮助都将不胜感激

这是我的密码：

import React，{useffect}来自“React”；
从“react bootstrap”导入{Navbar、Nav、NavDropdown、图像、表单、按钮}；
从“../../images/icons/sm write.svg”导入写入；
从“../../images/icons/search.svg”导入搜索；
常量导航栏=（道具）=>{
返回(
{/*  */}
直线领导
{/*无论登录状态如何显示*/}
{/*登录时显示*/}
{已验证&&(
书
大堂
我的比赛
{/*余额：${props.Balance}*/}
轮廓
logout（）}>注销
)}
{/*未登录时显示*/}
{！已验证&&(
loginWithRedirect（{}）}>登录
)}

警报（“写入”）}>
警报（“搜索”）}>

);
};
导出默认导航栏