Bootstrap - элементы в div разделяются на 2 строки при изменении ширины

Question

Элементы в div разделяются на две строки элементов, когда width < 720px.Я думаю, что это связано с тем, что я использую сеточную систему Bootstrap.

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

В этой строке кода используется navbar-expand-md, что означает, что максимальная ширина контейнера составляет 720px в соответствии с Bootstrap 4.2.документация.Но я не могу найти способ исправить эту проблему.

Как это исправить?

Вот ссылка на скрипку: https://jsfiddle.net/17g6uqvt/

Answer 1

Добавить свойство CSS inline-block для #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/