html - Bootstrap - 当宽度改变时，div 中的元素分成两行

Question

div中的元素在width < 720px时分成两行元素.我认为这与我使用的是 Bootstrap 的网格系统有关。

<nav id="navbar" class="navbar navbar-expand-md navbar-light bg-light">

这行代码使用了navbar-expand-md ，这意味着根据 Bootstrap 4.2 文档，最大容器宽度为 720px。但我找不到解决此问题的方法。

我该如何解决这个问题？

这是 fiddle 链接:https://jsfiddle.net/17g6uqvt/

Answer 1

为 #search-box 添加 CSS 属性 inline-block

#search-box {
    width: 250px;
    border: none;
    height: 1.8rem;
    display: inline-block;
}

修改一些javascript函数

var COLLAPSE_WIDTH = 768;

function init_navbar () {
    $('.nav-link').on( {
        mouseenter: function () {
            $(this).addClass('hover');
        },
        mouseleave: function () {
            $(this).removeClass('hover');
        }
    });

    window.isCollapsed = true;
    $('.btn-search').on('click', function () {
        if (window.windowSize > COLLAPSE_WIDTH) {
            $('#search-box').toggleClass('hidden');
            $('.navbar-nav').toggleClass('hidden');
        }
        window.isCollapsed = !isCollapsed
    });
}
function check_width() {
    window.windowSize = $(window).width();
    if (windowSize < COLLAPSE_WIDTH) {
        $('#search-box').removeClass('hidden');
        //$('#search-btn').addClass('hidden');
        $('.navbar-nav').removeClass('hidden');
        $('.nav-link').addClass('collapsed');


    }
    if (windowSize > COLLAPSE_WIDTH) {
        $('#search-box').addClass('hidden');
        //$('#search-btn').removeClass('hidden');
        $('.navbar-nav').removeClass('hidden');
        $('.nav-link').removeClass('collapsed');

    }
}
$(document).ready(function() {
    check_width();
    $(window).resize(check_width);
    init_navbar();
});

https://jsfiddle.net/lalji1051/3h9eawz7/1/