Reactjs Bootstrap 4 flex容器可根据视口大小进行调整，以避免对下一行进行换行或溢出？

应用程序（React+Bootstrap 4）在中视口或更高的视口中看起来不错，但在small/mobile中，搜索栏和排序溢出，并下降到侧边栏下的下一行：

我的代码：

  return (
    <div className="container-fluid">
      <div className="row">
        <nav className="sidebar">
          <NavBar />
        </nav>
        <main
          role="main"
          className="col-md-9 mx-sm-auto mt-4 d-flex flex-nowrap"
        >
          <div className="col-md-9 flex-shrink-1">
            <SearchBar onSubmit={handleSearchSubmit(props.searchTerm)} />
          </div>
          <div className="flex-shrink-1">
            <DropDown />
          </div>
        </main>
      </div>
    </div>
  ); 
} 

返回(
); 
} 

昨天我的导航栏也有同样的问题。我只是用媒体查询宽度