Bootstrap-宽度变化时div中的元素分为两行

Question

当01jan.csv 02jan.csv etc. 时，div中的元素分为两行。我认为这与我正在使用Bootstrap的网格系统有关。

width < 720px

此行代码使用<nav id="navbar" class="navbar navbar-expand-md navbar-light bg-light"> ，根据Bootstrap 4.2文档，这意味着最大容器宽度为720px。但是我找不到解决此问题的方法。

我该如何解决？

以下是小提琴链接：https://jsfiddle.net/17g6uqvt/

Answer 1

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

#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/