Question

我有一个JS小提琴 https://jsfiddle.net/zuer7g75/1/

<body>
<div class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".category-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse category-navbar-collapse">
            <ul class="nav navbar-nav">

                <li><a href="/"><span class="glyphicon glyphicon-home"></span></a></li>

    <li>
        <a  href="/computers">
            Computers
        </a>
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            &nbsp;<i class="fa fa-angle-down"></i>

        </a>

        <ul class="dropdown-menu">
        <li>
            <a href="/desktops">
                Desktops
            </a>
        </li>
        <li>
            <a href="/notebooks">
                Notebooks
            </a>
        </li>
        <li>
            <a href="/software">
                Software
            </a>
        </li>
        </ul>

    </li>
    <li>
        <a  href="/electronics">
            Electronics
        </a>
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            &nbsp;<i class="fa fa-angle-down"></i>

        </a>

        <ul class="dropdown-menu">
        <li>
            <a href="/camera-photo">
                Camera &amp; photo
            </a>
        </li>
        <li>
            <a href="/cell-phones">
                Cell phones
            </a>
        </li>
        <li>
            <a href="/others">
                Others
            </a>
        </li>
        </ul>

    </li>
    <li>
        <a  href="/apparel">
            Apparel
        </a>
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            &nbsp;<i class="fa fa-angle-down"></i>

        </a>

        <ul class="dropdown-menu">
        <li>
            <a href="/shoes">
                Shoes
            </a>
        </li>
        <li>
            <a href="/clothing">
                Clothing
            </a>
        </li>
        <li>
            <a href="/accessories">
                Accessories
            </a>
        </li>
        </ul>

    </li>
        <li>
            <a href="/digital-downloads">
                Digital downloads
            </a>
        </li>
        <li>
            <a href="/books">
                Books
            </a>
        </li>
        <li>
            <a href="/jewelry">
                Jewelry
            </a>
        </li>
        <li>
            <a href="/gift-cards">
                Gift Cards
            </a>
        </li>


            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form action="/search" method="get" onsubmit="return check_small_search_form()">    <div class="search_box pull-right">
        <input type="text"  id="small-searchterms"  autocomplete="off"
                    value="Search store" name="q"  onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
    </div>


    <script>
    $(document).ready(function () {
        $('.navbar a.dropdown-toggle').on('click', function (e) {
            var elmnt = $(this).parent().parent();
            if (!elmnt.hasClass('nav')) {
                var li = $(this).parent();
                var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2;
                var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10;

                if (!li.hasClass('open')) li.addClass('open')
                else li.removeClass('open');
                $(this).next().css('top', heightParent + 'px');
                $(this).next().css('left', widthParent + 'px');

                return false;
            }
        });
    });
</script>

<script>
    function setMouseHoverDropdown() {
        if ($(window).innerWidth() > 767) {
            $('ul.nav li').hover(function () {
                $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
            }, function () {
                $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
            });
        }
    }
    $(window).load(function () {
        setMouseHoverDropdown();
    });
    $(document).ready(function () {
        setMouseHoverDropdown();
    });
    $(window).resize(function () {
        setMouseHoverDropdown();
    });
</script>

</body>

在JS小提琴中，默认情况下你会看到一个移动菜单。

请将JS小提琴的结果菜单扩展到最大。现在您将看到Web视图而不是移动设备。

它有一个菜单，上面写着计算机电子设备等，你可以在右侧看到一个搜索框。

现在，如果你试图慢慢减小jsfiddle结果窗口的宽度，你可以看到搜索框跳到底部。

我希望搜索菜单与菜单保持同一行，而是将菜单内容包装成两行..

我该怎么做。

调整窗口大小而不包含div

0 个答案: