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

时间:2018-06-20 08:30:14

标签: html css bootstrap-4

我的导航栏在全屏上显示正常,但是在调整浏览器大小时出现一些问题,我附加了一些图像,我想知道即使调整大小后如何使按钮(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>

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

enter image description here

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

enter image description here

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

enter image description here

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

您需要将父实体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>