HTML 被推送到导航栏上的第二行

Question

我正在尝试创建一个导航栏标题，左侧有 Logo ，中间有搜索框，右侧有一个类似于 Reverb 的小菜单。这里:

我已经很接近了，但由于某种原因，我的菜单被推到了第二行，因为我的搜索栏太长了。

我试过将这些部分放入行中并将这些部分分成更小的 col-sm-4 div，但这会使事情变得更加困惑(仅供引用，我使用的是 Bootstrap 4)。

这是我的 html。除了更改默认颜色外，没有真正使用任何 CSS。

<header class="header">
        <nav class="navbar navbar-expand-sm fixed top mb-3">
            <div class="container">
                <a href="#" class="navbar-brand">
                            NAVBAR
                </a>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            By
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">User name</a>
                            <a class="dropdown-item" href="#">Member type</a>
                            <a class="dropdown-item" href="#">Company</a>
                            <a class="dropdown-item" href="#">Genre</a>
                            <div role="separator" class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-secondary" type="button">Go!</button>
                    </span>
                </div>
                <ul class="nav justify-content-end">
                    <li class="nav-item">
                        <a class="nav-link active" href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-bell-o" aria-hidden="true"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-user" aria-hidden="true"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i></a>
                    </li>
                </ul>
           </div>
        </nav>    
    </header>

Answer 1

如果您的目标是让搜索右侧的图标不换行，那么您可以尝试这样的操作:

ul.justify-content-end {
  min-width:200px;
}