导航栏按钮在调整大小时保持内联

Question

我的导航栏在全屏上显示正常，但是在调整浏览器大小时出现一些问题，我附加了一些图像，我想知道即使调整大小后如何使按钮(Search Buttons)内联！

.btn-padding {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

<nav class="navbar navbar-expand-md navbar-dark navcolor">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
        
            <li className="nav-item btn-padding-40"></li>

            <li className="nav-item btn-padding-40">
               
            </li>

            <li className="nav-item btn-padding-45">
                <a className="nav-link page-title">SPRINTS</a>
            </li>

            <li class="nav-item">
            <select value={this.state.value} onChange={this.handleChange} className="custom-select form-control btn-padding droppadding">
                    {optionItems}
             </select>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                 <form class="form-inline">
                    <input id="SearchTxt2"  className="form-control btn-padding" type="text" placeholder="Sprint ID"></input>
                    <button className="btn btn-primary btn-padding" onClick={(e) => this.handleSubmit2(e)} type="submit">Search</button>
                </form>
            </li>    

                <li class="nav-item">
                    <form class="form-inline">
                        <input id="SearchTxt"class="form-control btn-padding" type="text" placeholder="Issue ID"></input>
                        <button class="btn btn-primary btn-padding" type="submit" onClick={(e) => this.handleSubmit(e)} >Search</button>
                    </form>
                </li>
        </ul>
    </div>
</nav>

全屏没关系，它应该显示为

半屏按钮，而不是一直保持内联，它们在输入下方通过

崩溃崩溃时也会发生同样的情况，它们都位于输入下方

Answer 1

您需要为此使用input-group。

<div class="input-group">
  <input id="SearchTxt2"  className="form-control btn-padding" type="text" placeholder="Sprint ID">
  <div class="input-group-append">
    <button className="btn btn-primary btn-padding" onClick={(e) => this.handleSubmit2(e)} type="submit">Search</button>
  </div>
</div>

input-group的更多详细信息：Click here

Answer 2

您需要将父实体div的属性white-space设置为nowrap

<!-- Now try to resize your screen using developer tools or simply resizing the window -->
<div style="white-space: nowrap">
       <input type="text" />
       <button>OK</button> 
</div>