Question

我正在尝试在导航栏中实现右浮动搜索框，但是当我调整浏览器窗口大小时，搜索框会向下跳一行。我希望它保持在右边而不是向下跳一排。我怎样才能做到这一点？这是我的导航栏代码：

<nav class="navbar navbar-expand-lg navmenu justify-content-between">
    <a class="navbar-brand themefont" href="/">Försvarshögskolan</a>
    <div class="input-group justify-content-end">
        <form name="form" class="form-inline" ng-submit="vm.anonymousSearch()" role="form">
            <input type="text" class="form-control" placeholder="Svara anonymt med pin..." name="search" id="search" ng-model="vm.search.input" style="background-color: rgba(255, 255, 255, 0.2); color: lightgrey; border-color: grey;">
            <span class="input-group-btn">
                <button class="btn btn-outline-secondary anonymous-search" type="submit">Sök</button>
            </span>
        </form>
    </div>
</nav>

Answer 1

跳跃是由响应式崩溃引起的。对于类navbar-expand-lg，当您调整大小的浏览器窗口宽度小于992px（因为-lg后缀）时，会发生这种响应式折叠。将提及的课程更改为navbar-expand，以便您的搜索框始终位于右侧：

<nav class="navbar navbar-expand navmenu justify-content-between">

Bootstrap导航栏中的搜索框向下跳一行

1 个答案: