Question

我试图在左侧创建一个带有徽标的导航栏标题，在中间创建一个搜索框，在右侧创建一个类似于混响的小菜单。这里：

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

我已经尝试将这些部分放入更小的col-sm-4 div中，但这会使事情变得更加混乱（仅供参考，我使用Bootstrap 4）。

这是我的HTML。除了更改默认颜色之外，Haven还没有完成任何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;
}

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

1 个答案: