Css 如何将引导导航栏切换按钮与品牌名称的左侧或右侧对齐？

我在react应用程序中使用引导导航栏，代码如下-

 <nav className="navbar navbar-default navbar-expand-sm navbar-light bg-light">
      <div className="container-fluid">
        <div className="navbar-header">
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <NavLink className="navbar-brand mx-auto" to="/">
            <h4>Crafting Social Minds</h4>
          </NavLink>
        </div>
        <div
          className="collapse navbar-collapse me-auto"
          id="navbarTogglerDemo03"
        >
          <ul className="navbar-nav ms-auto navbar-custom">
            <li className="nav-item">
              <NavLink
                className="nav-link"
                exact
            
                to="/"
              >
                Organised Events
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                className="nav-link"
                to="/upcoming-events"
              >
                Upcoming Events
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                className="nav-link"
             
                to="/new-event"
              >
                New Event
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                className="nav-link"
               
                to="/about"
              >
                About Us
              </NavLink>
            </li>
          </ul>
          {/* <div className="social-part">
            <i className="fa fa-facebook" aria-hidden="true"></i>
            <i className="fa fa-twitter" aria-hidden="true"></i>
            <i className="fa fa-instagram" aria-hidden="true"></i>
          </div> */}
        </div>
      </div>
    </nav>

打造社会头脑


有组织的活动


即将举行的活动


新事件


关于我们


{/* 
*/}

对于大型和中型设备，导航栏如下所示-

对于小型设备，相同的导航栏如下所示-

---

因此，对于大型（和中型）设备，导航栏看起来与我预期的一样，但对于小型设备，切换导航栏按钮显示在品牌名称上方，而我希望它显示在品牌名称的左侧或右侧。有没有办法在不更改仅使用引导类的大型设备的视图的情况下修复此问题？

您使用的是me auto和ms auto（边距结束和边距开始），但这些是用于引导5的。Bootstrap 4使用mr auto和ml auto（你帖子上的标签上写着Bootstrap-4）

如果您希望按钮位于左侧，而您的品牌名称位于右侧，则应使用mr-0 mr-md-3覆盖正常边距，尽管您的名称上带有h4样式，但它仅适合320像素宽的显示器

请参阅。我们这里不处理代码的图像。