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

问题描述

我的导航栏在全屏上显示正常，但是当我调整浏览器大小时遇到了一些问题，我附上了一些图片，我想知道如何(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>

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

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

Collapse崩溃时也发生了同样的情况，它们位于输入之下

标签： htmlcssbootstrap-4

您将需要使用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：点击这里

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

问题描述

解决方案

推荐阅读