减少页面宽度时将导航项目阻止到新行中

Question

嗨，我已经用react-bootstrap创建了一个react应用，我正在创建一个标题导航栏。我有一个导航品牌和两个导航项目。右侧导航项是输入组。问题是当减小页面的宽度时，输入组会转到新行，而我只希望输入组在调整大小时保持在同一行。

这是我的代码：

<nav className="navbar fixed-top navbar-expand-sm navbar-dark bg-primary">
    <div className="navbar-brand ml-3">
        <Link to={"#"}>
            <button></button>
        </Link>
    </div>

    <div className={'nav-item'}>
        <h3 className={'d-none d-sm-block text-nowrap'}>PROJECT TITLE</h3>
    </div>
    <div className="input-group ml-2 nav-item">
        <input className="form-control"
               type="search"
               placeholder="New Stuff..."/>
        <span className={'input-group-btn'}>
        <button className="btn btn-danger" type="submit">
            ...
        </button>
               </span>
    </div>
</nav>

任何帮助将不胜感激！

Answer 1

将以下class添加到您的input-group。

<div className="input-group ml-2 nav-item text-nowrap">
<!--                                      ~~~~~~~~~~~ -->